为什么不反应让我在jsx中使用普通的旧HTML？

Question

我刚刚在React开始了一个项目。在某个地方，我已经阅读或看过一个视频，创作者感到自豪，与Angular不同，你不需要学习新的标签而只使用普通的旧HTML。

我很惊讶反应让我将<img style="..." />更改为<img styles="" />. (It's样式vs样式。）

我的问题是我设置错误或JSX模板的正确行为？如何在JSX中使用普通的旧HTML？

我收到的错误是

  

invariant.js：38 Uncaught Invariant Violation：style prop期望从样式属性到值的映射，而不是字符串。例如，使用JSX时style = {{marginRight：spacing +'em'}}。

Answer 1

首先，如果您希望保持内联风格，则应该style={<your-css-rules>}而不是styles="<your-css-rules>"。

然而，由于它似乎在React中使用内联样式很诱人，我会继续学习关于分离关注点和使用css类的经验教训。

因此，在您的示例中，您可以执行类似

的操作

// CSS

imgClass {
    background-color: #d0e4fe;
}

// HTML
<img className="imgClass" />

This answer概述了何时避免在React中使用内嵌样式。

Answer 2

https://facebook.github.io/react/tips/inline-styles.html

对于内联样式，style是正确的方法