ReactJS zmienić obraz tła dynamicznie?

Question

starałem się zmienić styl tła obrazu dynamicznie następującym Gr:

Oto mój komponent do zmiany go,

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

Dzięki za pomoc

Answer 1

masz jeszcze” t określono, kiedy chcesz zmienić backgroundImage, więc utworzyłem wersję, która zmienia ją na 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> 
     ) 
    } 
}); 

Zauważ, że backgroundImage: 'url(' + imgUrl + ')' nie musi już mieć końcowego średnika, w rzeczywistości końcowy średnik spowoduje, że React będzie podnosić i popełniać błędy.

Answer 2

Jest to spowodowane końcowym średnikiem w Twoim stylu. Zobacz react issues #2862.