React 错误：样式道具值必须是对象 react/style-prop-object答案

【问题标题】：React error: Style prop value must be an object react/style-prop-objectReact 错误：样式道具值必须是对象 react/style-prop-object
【发布时间】：2019-03-02 16:21:07
【问题描述】：

我正在尝试在图像周围环绕文字，如果我使用以下代码：

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" style="float: left" />
         <p> This is where the other text goes about the swimmer</p>
 </div>

现在我知道这个style="float: left" 是html 5。但是如果我使用以下代码：

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" align="left" />
            <p> This is where the other text goes about the swimmer</p>
 </div>

有效！为什么我不能在 React 中使用样式？

【问题讨论】：

标签： html reactjs image

【解决方案1】：

你仍然可以在 react 中使用样式。尝试： style={{float: 'left'}}

【讨论】：

【解决方案2】：

问题是您将样式传递为String 而不是Object。 React 期望您以对象表示法传递样式：

style={{ float:`left` }}  // Object literal notation

或者另一种方式是：

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

<div style={divStyle}>   // Passing style as an object

见documentation for more info

【讨论】：

【解决方案3】：

如果属性（例如 'align-self'）有特殊字符，您也需要使用单引号作为属性名称，例如

style={{'align-self':'flex-end'}}

您可能会看到警告“不支持样式属性 align-self。您的意思是 alignSelf？”，但样式已正确复制到生成的 html align-self: flex-end;。

【讨论】：

【解决方案4】：

来自doc：

style 属性接受具有 camelCased 属性(style={{float: 'left'}}) 而不是 CSS 字符串 (style="float: left") 的 JavaScript 对象。 这与 DOM 风格的 JavaScript 属性一致，效率更高，并且可以防止 XSS 安全漏洞。

所以你应该写成：

<img src={myImageSource} alt="swimmer" height="300" width="300" style={{float: 'left'}} />

【讨论】：

感谢所有贡献的人。将样式视为对象。

【解决方案5】：

在样式类之前和之后添加 ' 并且值对我有用。

【讨论】：

【解决方案6】：

你可以在 react 中写内联样式为style={{float: 'left'}}

如果您想使用多个属性，可以将其用作对象，如下所示以避免 lint 错误。

const imgStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  float: 'left',
  height: '300px',
  width: '300px'
};

<div className="container">
         <img src={imgStyle} alt="swimmer" />
         <p> This is where the other text goes about the swimmer</p>
 </div>

【讨论】：

【解决方案7】：

<div className="container">
   <img src={myImageSource} alt="swimmer" height="300" width="300" **style={{align:'left'}}** />
   <p> This is where the other text goes about the swimmer</p>
 </div>

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。