在反应中添加样式属性答案

【问题标题】：Adding style attribute in react在反应中添加样式属性
【发布时间】：2019-10-31 02:28:03
【问题描述】：

在反应中，有这个：

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"}}>

我做错了什么？

【问题讨论】：

【解决方案1】：

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

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

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

基于 cmets 更新

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果你试试这个，它会起作用的：

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

你应该用 camelCase 来写。

font-weight => 字体W八

【讨论】：