ReactJSのインラインスタイル

Question

ReactJSが新しくなりました。私はそれをクリックするとボタンのテキストと色を同時に変更しようとしていました。このコードは動作します：

私は次のようなインラインスタイルをしようとすると、コードが機能しなくなります。

<button style={background:yellow} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

私はさまざまな方法で何度も試してみました。私はそれが現時点でインラインスタイルであることを望みます。 Reactからインラインスタイルを直接適用することは可能ですか？はいの場合は、状態を評価し、条件文を介して別の色を設定します。

Answer 1

は、オブジェクトとして、あなたのインラインスタイルを宣言します。

<button style={{ background: 'yellow' }} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

Answer 2

あなたはブラケットと、いくつかの引用符のセットが不足している：

<button style={{background: 'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

のリアクトスタイルの小道具は、オブジェクト（{background: 'yellow'}）を見込んで、それはだから単純な文字列ではなく、小道具の周りに余分な括弧が必要です{{...}}。

Answer 3

あなたは別の{}でそれをラップする必要があります。

<button style={{background:'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

{} Sの外側セットはまさに内部ではJavaScriptコードであるJSXコンパイラに指示します。内部セット{}は、JavaScriptオブジェクトリテラルを作成します。

Answer 4

まず、はがオブジェクトとして渡される必要があります。

第2の - cssの値は、の文字列である必要があります。このような

style={{ background: 'yellow' }}