警告：未知 DOM 属性 class。您是说 class姓名吗？

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 约定：

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

JSX In Depth.

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

你不能对任何HTML标签属性使用class，因为JS有另一个含义class。这就是为什么你必须使用 className 而不是 class.

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

Answer 4

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

for   --> htmlFor
class --> className

Answer 5

在HTML中我们使用

class="navbar"

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

className="navbar"

Answer 6

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

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

如果我们使用 class 而不是 class 名称，反应会将其推断为 javascript class 而不是 html class 属性。 [原因是变量名 'class' 已在文件中用于创建 javascript class 并保留用于相同目的]。这是错误的，编译器会抛出错误，因为 javascript class 不是 html DOM 元素的有效属性。

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

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

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

Answer 7

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

警告：未知 DOM 属性 class。您是说 class姓名吗？

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

javascript

reactjs

react-jsx