如何使用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支柱的值应该被解释为JavaScript，另一组{}表示您正在该值中构造一个对象。