警告：未知的DOM属性类。你的意思是className吗？

Question

我刚刚开始探索React，添加了一个带有简单渲染功能的组件：

render() {
  return <div class="myApp"></div>
}

当我运行应用程序时，出现以下错误：

Warning: Unknown DOM property class. Did you mean className?

我可以通过将class更改为className来解决此问题。

问题是; React会执行这个约定吗？另外，为什么我需要使用className而不是传统的class？如果这是一个限制，那么是由于JSX语法还是其他地方？

Answer 1

是的，它是一个React惯例：

  

由于JSX是JavaScript，因此class和for等标识符都是   不鼓励为XML属性名称。相反，React DOM组件   期望DOM属性名称分别为className和htmlFor。

https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

Answer 2

Meteor使用babel将ES5转换为ES6（ES2015），因此我们可以将其作为正常的Node应用程序处理，并添加了babel转换器。

您需要将.babelrc文件添加到项目的根文件夹中，并添加以下项目

{
  "plugins": [
    "react-html-attrs"
  ]
}

当然，您需要使用npm安装此插件：

  

npm install --save-dev babel-plugin-react-html-attrs

Answer 3

在React.js中，没有for和class属性可用，因此我们需要使用

for   --> htmlFor
class --> className

Answer 4

您不能将class用于任何HTML标记属性，因为JS具有另一种类的含义。这就是为什么你必须使用className而不是class。

并且还使用htmlFor属性而不是for。

Answer 5

在HTML中，我们使用

class="navbar"

但是在React和ReactNative中没有HTML，我们使用JSX（Javascript XML） 在这里我们使用

className="navbar"

Answer 6

在react 16.13.1中，您可以使用class属性。它会引发“警告”异常，但不会停止执行。

Answer 7

使用babel编译时的JSX语法，将用于创建HTML元素的基本语法为

<section class="container">
  <header><h1>header</h1></header>
  <div class="content">content</div>
  <footer>Footer</footer>
</section>

如果我们使用类而不是className，则react会将其推断为javascript类而不是html class属性。 [原因是文件中已经使用了变量名'class'来创建javascript类，并且出于相同目的保留了该名称]。这是错误的，并且由于javascript类不是html DOM元素的有效属性，因此编译器确实会引发错误。

   React.createElement('div', {attributes}, "Hello");

因此，有必要使用className代替class。

   React.createElement("p", {"class": "header"}, "Hello");