React 16中的class vs className

Question

我看到React 16允许将属性传递给DOM。所以，这意味着＆＃39; class＆＃39;可以用来代替className，对吧？

我只是想知道在类上使用className是否有好处，除了向后兼容以前版本的React。

Answer 1

class是javascript中的关键字，JSX是javascript的扩展。这是React使用className代替class的主要原因。

在这方面没有任何改变。

进一步扩展这一点。 关键字表示令牌在语言语法中具有特殊含义。例如：

class MyClass extends React.Class {

令牌class表示下一个令牌是标识符，接下来是类声明。请参阅Javascript Keywords + Reserved Words。

令牌是关键字的事实意味着我们不能在某些表达式中使用它，例如

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

其中一个问题是，没有人能够知道将来是否会出现其他问题。每种编程语言仍在不断发展，class实际上可以用于一些新的冲突语法。

className没有此类问题。

Answer 2

除了已经给出的其他好答案之外，只是为了更轻松一点：

  

您会注意到React使用的是className而不是   传统的DOM类。来自文档，＆＃34;由于JSX是JavaScript，   不鼓励将类和for等标识符作为XML属性   名。相反，React DOM组件期望DOM属性名称   分别是className和htmlFor。＆＃34;

http://buildwithreact.com/tutorial/jsx

另外，quote zpao（React贡献者/ facebook员工）

  

我们的DOM组件（主要）使用JS API，因此我们选择使用JS   properties（node.className，而不是node.class）。

Answer 3

React团队实际上将在即将到来的未来（source）中切换到class，而不是 className：

  

  
• className→class（#4331，另请参见下面的#13525 (comment)）。   被提出了无数次。我们已经允许通过课程   向下到React 16中的DOM节点。这造成的混乱是   不值得尝试保护的语法限制。
  

为什么要切换而不同时支持两者？

  

如果我们在没有警告的情况下都支持这两个机构，那么社区将分裂   使用哪个。 npm上接受类道具的每个组件   将必须记住同时转发两者。如果连   中间不玩，只实现一个道具，该类得到   丢失-否则您可能会在底部遇到class和className   彼此“不同意”，React无法解决该问题   冲突。因此，我们认为那会比现状更糟，并希望   避免这种情况。

因此，请保持关注。
只要API期望，我仍将使用className。

Answer 4

React docs建议使用cannonical React attribute名称而不是传统的Javascript命名，所以即使React允许将属性传递给DOM，它也会给你一个警告。

来自 docs:

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.

Answer 5

reactJS中的类与className 类是reactJS中的保留字或关键字，而函数在javascript中。这就是为什么我们使用“className”这个词来引用这个类。

Answer 6

从2019年6月开始，将className更改为class的过程已停止，以后可以继续

这是facebook开发人员的帖子，解释原因

https://github.com/facebook/react/issues/13525

Answer 7

React团队对此没有真正的解释，但是自从ES2015 +引入以来，人们就认为它与Javascript中的保留关键字“ class”是有区别的。

即使您在创建元素时在元素配置中使用“类”，也不会引发任何编译/渲染错误。

Answer 8

在ReactJS中，我们正在处理JSX，而不是众所周知的HTML。 JSX希望您使用className，因为它是基础javascript DOM API！ class是JS中的保留关键字不是我们不使用class而是使用className的主要原因。这是因为我们指的是DOM API

Answer 9

问题是你看到的 react 代码不是 HTML - 实际上 JSX 是 javascript 的扩展（基本上是 javascript + 加上一点点）。

问：我们可以用class来表示HTML属性：'class'吗？

鉴于它是 javascript，您不能使用 class 这个词，因为这是一个特殊的 javascript 词，它是“保留的”（javascript 规定了某些您可以使用和不可以使用的词）。

鉴于 class 是保留字，您将如何在我们的 "html" 代码 jsx 中编写类，因为该字是一个“保留”字并且是不允许的被这样用？解决方法是使用：“className”而不是“class”，这样 jsx 就会知道您正在处理 html class 属性而不是 javascript class 关键字。

Answer 10

首先，让我们想想为什么 className 比 class 更重要：

我最近看到一个 CSS in React conference video by Joel Denning，他不同意使用 className 是因为 class 是 JavaScript 中的关键字。我倾向于同意他的观点，尽管我还不是很清楚。以下是他的视频和我的一些输入的解释：

打开 babel 并编译以下 JSX 代码段：

const element = <div className="foo" />;
const element2 = <div class="foo" />;

Babel 将其编译为：

var element = /*#__PURE__*/React.createElement("div", {
  className: "foo"
});
var element2 = /*#__PURE__*/React.createElement("div", {
  "class": "foo"
});

了解如何将 class 视为字符串“类”，因此 JavaScript 关键字没有问题。

HTML 元素具有 class 之类的属性，然后一旦解析了一个 DOM 节点，就会创建一个具有 className 之类的属性。属性和属性的区别？看看What is the difference between properties and attributes in HTML?。

HTML 属性值只能是字符串，而 DOM 属性可以有任何值。在处理类名时，我不确定这有什么用处，但更新 DOM 属性肯定比更新属性更清晰：

const div = document.createElement('div');

// Attribute update
div.setAttribute('class', 'foo');

// Property update
div.className = 'foo';

此外，更新 DOM 属性会触发重新渲染，这与类的名称是可变状态的想法非常吻合。

属性通常用于初始化 DOM 属性，但是，class 属性和 className 属性会被反映，即更新 className 属性会导致 class 属性变为使用相同的值更新......这使得为什么选择 className 的推理令人困惑，也许是因为语义属性与可以更新的值相关联？我不知道...

React 允许 class 与 className 一起使用，这太令人困惑了（如问题中所述）。来自https://github.com/facebook/react/issues/13525：

<块引用>

className → class（#4331，另见下面的#13525（评论））。这已经被提出无数次了。我们已经允许在 React 16 中将类向下传递到 DOM 节点。这造成的混乱不值得它试图防止的语法限制。我们不会单独进行此更改，但与上面的所有其他内容相结合是有意义的。请注意，我们不能在没有警告的情况下允许两者，因为这使得组件生态系统很难处理。每个组件都需要学会正确处理两者，并且存在它们冲突的风险。由于许多组件处理 className（例如通过附加到它），它太容易出错。

在我看来，这个问题没有具体的答案。我喜欢使用属性而不是属性来更新某些内容背后的语义，但是如果你让我回到决定使用 className 而不是 class 的时间，我会说这是不必要的。

tldr; 为了回答你的问题，我会坚持使用 className，它避免了 class 的警告，并且是大多数其他 React 开发人员熟悉的方法，因此您的代码将更易于阅读。

还是不满意？阅读https://github.com/facebook/react/issues/13525#issuecomment-417818906。