ReactJS动态改变背景图片？

Question

我试图动态地更改背景图片的风格以下DIV：

这是我要改变它组件，

render: function() { 
    var divImage = { 
    backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc + ");" 
    }; 

    return (
    <li> 
     <div ref="image-pane" className="player" style={divImage}></div> 
    </li> 
) 
} 

感谢您的帮助

Answer 1

你的天堂” t指定了何时需要更改backgroundImage，所以我创建了一个版本，并将其更改为onClick：

React.createClass({ 
    getInitialState: function() { 
     nextImg: false, 
    }, 
    handleClick: function() { 
     this.setState({ nextImg: !this.state.nextImg }) 
    }, 
    render: function() { 
     var imgUrl = this.state.nextImg ? this.state.nextImgSrc : this.state.song.imgSrc; 
     var divStyle = { 
      backgroundImage: 'url(' + imgUrl + ')' 
     } 

     return (
      <li> 
       <div ref="image-pane" style={divStyle} onClick={this.handleClick} className="player"></div> 
      </li> 
     ) 
    } 
}); 

请注意，backgroundImage: 'url(' + imgUrl + ')'不再必须有尾随分号，事实上尾随分号会导致React引发和错误。

Answer 2

这是由您的风格中的尾随分号造成的。请参阅react issues #2862。