ReactJS modifica dinamicamente l'immagine di sfondo?

Question

Stavo cercando di cambiare stile di sfondo immagine in modo dinamico per i seguenti div:

Qui è la mia componente per cambiarla,

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

Grazie per l'aiuto

Answer 1

si rifugio' t specificato quando vorresti cambiare backgroundImage, quindi ho creato la versione che lo modifica con 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> 
     ) 
    } 
}); 

Si noti che backgroundImage: 'url(' + imgUrl + ')' non deve più contenere il punto e virgola, in effetti il ​​punto e virgola finale causerà l'aumento e l'errore di React.

Answer 2

Ciò è causato dal punto e virgola finale nel proprio stile. Vedi react issues #2862.