如何制定樣式React.js

Question

我嘗試使用內聯樣式React.js，但我一直運行到錯誤：

在我的渲染功能，我有：

render: function() { 
    var style = this.state.submitted ? {{"backgroundColor": "#1abc9c", "opacity": "0.6"}} : {{}}; 
    return (
     <div> 

     <h1 className="home-two-question" style={style}>{text}</h1> 

     </div> 
    ) 
    }, 

基本上我想在點擊時切換此樣式。但是，當我運行這個時，我從React.js中得到一個錯誤。 React.js中內聯樣式的正確語法是什麼？謝謝！

Answer 1

在這一行：

var style = this.state.submitted ? {{"backgroundColor": "#1abc9c", "opacity": "0.6"}} : {{}}; 

你只是普通的JavaScript，而不是內部的JSX標籤。因此，你只是想使用單{}，不是雙{{}}：

var style = this.state.submitted ? {"backgroundColor": "#1abc9c", "opacity": "0.6"} : {}; 

特別是，當你做這樣的事情：

<div style={{"backgroundColor": "white"}}> 

有一組{}來表示的價值style prop應解釋爲JavaScript，另一組{}表示您正在構建該值內的對象。