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

问题是你传递的样式是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

有关详细信息，请参阅文档

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

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

您可能会看到一条警告“不支持的样式属性”。你说的是自己吗？“，但样式被正确复制到生成的html align-self: flex-end;。

来自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'}} />

正如其他人所说。当从HTML复制时，它得到字符串style="string: string"。你需要去style={{property: "value"}}

在样式类和值之前和之后添加'对我来说很有效。

您可以在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>

如果你需要多个内联样式，我就是这样做的。
将每个样式分隔到其自己的对象中：

const style1={'text-align':'center'};
const style2={'color':'red'};

然后像这样使用这些对象：（包括3个点，用逗号分隔）

<h1 style={{...style1,...style2}}>Two Styles</h1>

我的例子如下：

export default function myFunction() {
    const style1={'text-align':'center'};
    const style2={'color':'red'};

    return (
    <div>
      <h1 style={{...style1,...style2}}>Two Styles</h1>
    </div>
    )
}

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