javascript - 如何使用 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，而另一组 {}表示您正在该值内构造一个对象。