web-dev-qa-db-ja.com

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>
  )
}

助けてくれてありがとう

cssreactjsreact-jsx
16
rabishah

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が発生してエラーが発生します。

27
daniula

これは、スタイルの末尾のセミコロンが原因です。 react issues＃2862 を参照してください。

2
Brigand