在React中添加样式属性

Question

作为回应，请执行以下操作：

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

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

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

但这是行不通的。我也尝试过：

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

我究竟做错了什么？

Answer 1

不是font-weightbut fontWeight，你需要使用驼峰命名法

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

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

根据评论更新

您的示例代码存在逻辑错误。css 没有更新，只有文本。所以使用三元来改变文本。

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