Question

我正在尝试在图像周围包裹文本，如果我使用以下代码：

<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"是html5。但是，如果我使用以下代码，则：

<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中使用样式？

Answer 1

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

Answer 2

如果某个属性（例如“ align-self”）具有特殊字符，则还需要对属性名称使用单引号，例如

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

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

Answer 3

来自doc：

样式属性接受具有 camelCased属性（style={{float: 'left'}}）的JavaScript对象，而不是 CSS字符串（style="float: left"）< / strong>。 这与DOM样式JavaScript属性一致，效率更高，并防止了XSS安全漏洞。

因此，您应该将其编写为：

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

Answer 4

问题是您通过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

Answer 5

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

Answer 6

您可以以style={{float: 'left'}}的形式编写内联样式

如果要使用多个属性，可以将其用作对象，如下所示，以防止出现皮棉错误。

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>

Answer 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>

React error Line 18：样式属性值必须是一个对象react / style-prop-object

7 个答案: