警告: 未知 DOM 属性类。您指的是 className 吗？

我刚刚开始探索 React，通过添加一个带有简单呈现函数的组件:

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

当我运行这个应用程序时，我得到以下错误:

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

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

问题是: React 是否强制执行这个约定？还有为什么我需要使用 className而不是传统的 class？如果这是一个限制，那么它是由于 JSX 语法或其他地方？

131510 次浏览
小开
最佳答案

是的，这是一个反应公约:

由于 JSX 是 JavaScript，因此 class和 for等标识符是 不鼓励使用 XML 属性名称 期望分别使用 className和 htmlFor这样的 DOM 属性名。

JSX In Depth JSX 深度。

小开

流星使用巴别尔传送 ES5到 ES6(ES2015) ，因此我们可以将它作为一个普通的节点应用程序处理，并添加巴别尔传送器。

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

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

当然，你需要使用 npm安装这个插件:

Npm install —— save-dev babel-plugin-response-html-attrs

小开

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

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

小开

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

for   --> htmlFor
class --> className
小开

在 HTML 中我们使用

class="navbar"

但是在 React 和 ReactNativethere 没有 HTML，我们使用 JSX (Javascript XML) 在这里我们使用

className="navbar"
小开

当使用 babel 编译 JSX 语法时，它将用来创建 HTML 元素的底层语法将是

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

如果我们使用这个类而不是 className，那么 response 会将它推断为 javascript 类而不是 html 类属性。[变量名‘ class’已经在文件中用于创建 javascript 类的原因，并且被保留用于相同的目的]。这是错误的，编译器确实抛出了错误，因为 javascript 类不是 html DOM 元素的有效属性。

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

因此，有必要使用 className 而不是 class。

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

在反应16.13.1中，你可以使用 class 属性，它抛出一个“警告”异常，但是不会停止执行。

enter image description here


提交答案