ReactJS中的內聯樣式

我是ReactJS的新手。點擊時，我試圖同時更改按鈕的文字和顏色。此代碼的工作原理：ReactJS中的內聯樣式

class ToggleHelp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isHelpOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isHelpOn: !prevState.isHelpOn 
    })); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
     </button> 
    ); 
    } 
} 

ReactDOM.render(
    <ToggleHelp />, 
    document.getElementById('root') 
);

但是，當我嘗試使用以下內聯樣式時，代碼停止工作。

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

我試了幾次，以各種方式做。我希望它現在成爲一種內聯風格。是否可以直接從React應用內聯樣式？如果是的話，這個想法是評估狀態並通過條件語句在另一個顏色上設置一種顏色。

來源

2017-07-26 Esti

寫這樣的：'風格= {{的backgroundColor： '黃'}}' –

@MayankShukla人仍下落不明引號 –

@MayankShukla ...不是真的... –

聲明的內嵌樣式作爲一個對象：

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

來源

2017-07-26 17:36:08

你缺少一套支架和一些報價：

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

陣營的風格道具預計的對象（{background: 'yellow'}），並因爲它的不是一個簡單的字符串，你需要圍繞道具{{...}}的額外設置。

來源

2017-07-26 17:36:12

你需要用它在另一個{}：

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

外集{}的只有我告訴JSX編譯器，裏面有什麼是JavaScript代碼。 {}的內部集創建了一個JavaScript對象文字。

來源

2017-07-26 17:36:23

首先風格必須是作爲對象通過。

其次-css值必須是的一個字符串。

style={{ background: 'yellow' }}

來源

2017-07-26 17:36:23

ReactJS中的內聯樣式

回答

相關問題