在React中添加样式属性

Question

在做出反应时，要这样做：

return (
   <tag>
     { variable ? 
            <p> hello </p>
        :
            <p> world </p>
     }
   </tag>
)

如您所见，我正在执行三元运算符以根据variable输出内容。我想在p标签中添加style属性，如下所示：

<p style="color:#DF0101;font-weight:bold;"> hello </p>

但是它不起作用。我也尝试过：

<p style={{color:"#DF0101", font-weight:"bold"}}>

我在做什么错了？

Answer 1

不是font-weight，而是fontWeight，您需要使用 camelCase 表示法

 <p style={{color:"#DF0101", fontWeight:"bold"}}>

Ref

  

style属性接受具有 camelCased 属性的JavaScript对象，而不是CSS字符串。

---

根据评论进行更新

示例代码中存在逻辑错误。 CSS不会更新，只会更新文本。因此，请使用三元更改文本。

 <span style={{ color:"#DF0101", fontWeight:"bold" }}> 
   {{ lockPost === true ? 'Not ready' : 'Ready!' }} 
 </span>

Answer 2

JS变量（在这种情况下为键）中不能包含破折号。您想使用第二个示例，但将所有破折号替换为camelCase，如下所示：

<p style={{ color:"#DF0101", fontWeight:"bold" }}>

Answer 3

您可以尝试下面的代码来查看它是否有效吗？

var divStyle = {
  'font-weight':'bold'
};

<p style={pStyle}>Hello {this.props.name}</p>;

Answer 4

如果您尝试这样做，它将起作用：

<p style={{color:"#DF0101", fontWeight:"bold"}}>

您应该使用 camelCase 编写它。

font-weight =>字体 W 八