警告：未知的DOM属性类。您是说className吗？

113

我刚刚开始通过添加带有简单渲染功能的组件来探索React：

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

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

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

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

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

javascript reactjs react-jsx

— jsalonen
source

150

是的，它是一个React约定：

由于JSX是JavaScript，因此不建议使用诸如class和for等标识符作为XML属性名称。相反，阵营DOM组件期望像DOM属性名称className和htmlFor分别。

深度JSX。

— 维亚切斯拉夫
source

9

我觉得这非常不直观。我认为解析器应该知道如何根据上下文在两种语言之间切换上下文，减轻程序员和工具的负担

— Jonathan

13

流星使用babel将ES5转换为ES6（ES2015），因此我们可以将其作为添加了babel transpiler的普通Node应用程序来处理。

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

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

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

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

— 安全曲线
source

谢谢，我可以在安装react-facebook-login后修复“无效的DOM”。

— 卡卡西

12

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

for   --> htmlFor
class --> className

— 卡地基亚
source

4

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

并且也使用htmlFor属性代替for。

— 妮米·维玛（Nimmi Verma）
source

3

在HTML中，我们使用

class="navbar"

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

className="navbar"

— 穆罕默德·塔哈（Muhammad Talha）
source

0

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

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

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

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

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

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

— 萨西·库马尔（Sasi Kumar M）
source