React 16 中的类与类名

Question

我看到 React 16 允许将属性传递给 DOM。所以，这意味着可以使用“类”来代替类名，对吧？

我只是想知道除了与以前版本的 React 向后兼容之外，仍然使用 className 是否有优势。

原文由 free2ask 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在这方面没有任何改变。

进一步扩展这一点。 关键字 意味着标记在语言语法中具有特殊含义。例如在：

 class MyClass extends React.Class {

记号 class 表示下一个记号是一个标识符，后面是一个类声明。请参阅 Javascript 关键字 + 保留字。

标记是关键字这一事实意味着我们不能在某些表达式中使用它，例如

// 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';

// valid
props.class = 'css';

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

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

className 不存在此类问题。

原文由 Sulthan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新（2020 年 8 月）：

Dan Abramov 在同一主题上的 评论：

这是提案中最具争议的部分。从那时起，我们发布了 Hooks，鼓励编写功能组件。在函数组件中，我们一般建议对props使用解构，但是不能写 { class, ... } ，因为这样会出现语法错误。所以总的来说，尚不清楚这是否符合人体工程学以实际执行。我认为我们将来会重新审视这个问题是合理的，或者至少让 class 不发出警告，让人们做他们想做的事。但现在，我们将搁置这个想法。

所以，不

---

（2018 年 8 月）

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

• className → class （ #4331 ，另请参见下面的 #13525（评论） ）。 这已被无数次提出。我们已经允许将类向下传递到 React 16 中的 DOM 节点。这造成的混乱不值得它试图防止的语法限制。

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

如果我们在没有警告的情况下支持两者，那么社区将分裂使用哪一个。 npm 上接受类属性的每个组件都必须记住转发两者。如果即使中间的一个组件不配合并且只实现一个道具，类也会丢失 - 或者您可能会在底部“不同意”以 class 和 className 结束彼此之间，React 无法解决该冲突。所以我们认为这会比现状更糟，并希望避免这种情况。

所以你应该继续关注。

我仍然会推荐使用 className 只要这是 API 所期望的。

原文由 Maor Refaeli 发布，翻译遵循 CC BY-SA 4.0 许可协议