css – ReactJS动态更改背景图片?

前端之家收集整理的这篇文章主要介绍了css – ReactJS动态更改背景图片?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在为以下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>
  )
}

谢谢您的帮助

解决方法

您没有指定何时更改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升高和错误.

猜你在找的CSS相关文章