在 React 中使用类而不是 className 属性的任何或多或少的官方方式

Question

我想知道是否有或多或少的官方方法可以使用class属性而不是 React 中的className。

并在样式属性{{ 'background-color': 'red' }}中使用普通名称，而不是其驼峰大小写版本{{ backgroundColor: 'red' }}。

理想情况下，支持打字稿。

Answer 1

这种行为已经在 React 16 以后版本中得到了支持，也许与你在问题中期望的方式并不完全一样。样式不会作为 JSX 处理，而是作为字符串处理。在 15 中，类属性被忽略，而在 16 中，它将被传递

请参阅文档以了解更改原因的说明。 https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

下面的代码片段使用 React 16

function MyComponent(props){
return <div class="myclass">Color Will be Red</div>
}
ReactDOM.render(
<MyComponent />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<style>
.myclass {
color: red
}
</style>
<div id="react"></div>

下面的代码片段使用 React 15

function MyComponent(props){
return <div class="myclass">Color Will not be Red</div>
}
ReactDOM.render(
<MyComponent />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<style>
.myclass {
color: red
}
</style>
<div id="react"></div>

Answer 2

您已经可以使用烤肉串大小写(例如'background-color'( 在 JSX 样式标记中没有问题，但在 React 中强烈建议不要使用class代替className。

后者的原因是，尽管 JSX 你的 React 组件看起来与 HTML 相似，但它实际上是 JavaScript 的扩展。因为class是 JavaScript 中的一个关键字，所以当你在 JSX 中使用它时，React 会抛出一个警告：

警告：无效的 DOM 属性class。你是说className吗？

如果仍想对 CSS 类名使用class，则可以使用dangerouslySetInnerHTML属性从 JSX 设置 HTML。对于包括您的用例在内的大多数用例，不建议使用此属性，但它不会引发警告：

const DivWithInnerHTML = () => (
<div
dangerouslySetInnerHTML={{
__html: `
<div class="css-class-name" style="background-color: red;">
html text
</div>
`
}}
/>
);