时间戳

首页 > 解决方案 > 在 React 中使用 class 而不是 className 属性的任何或多或少的官方方式

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

问题描述

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

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

理想情况下支持 TypeScript。

标签： reactjs

解决方案

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

推荐阅读