警告:未知的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.

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 中的 class 有另一种含义。这就是为什么你必须使用 className 而不是 class。

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

Answer 5

在 HTML 中，我们使用

class="navbar"

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

className="navbar"