Bootstrap .well - Ändern der Farbe mit Reagieren Props

Question

Ich benutze Bootstrap & reactjs. Ich habe .well-Komponente auf meiner Seite. Der Benutzer sollte in der Lage sein, seine Farbe zu ändern. Die Farbe wird in {this.props.color} gespeichert. Ich versuche es so zu ändern:

<div className="well lead" style={{backgroundColor:'{this.props.color}'}} style={{marginTop:'20px'}} >

Aber es ist nicht & funktioniert Ich habe keine Ideen, warum

Answer 1

In Ihrem Code Sie 'this.props.color' verwendet Das ist eine einfache Zeichenfolge. sollte stattdessen sein:

style={{backgroundColor: this.props.color}} 

Und übrigens, sollten Sie besser alle Stileigenschaften innerhalb des gleichen Objekts setzen:

<div className="well lead" style={{backgroundColor: this.props.color, marginTop:'20px'}} >