React 16中的class vs className

Question

我看到React 16允许将属性传递给DOM.那么,这意味着'class'可以用来代替className,对吧？

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

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

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

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

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

没有这样的问题className.

Answer 2

React团队实际上将转向class 而不是 className即将到来的未来(来源):

• className→ class(#4331,另见下面的#13525(评论)).这已被无数次提出.我们已经允许将类传递到React 16中的DOM节点.这样做的混乱并不值得它试图防范的语法限制.

为何切换而不支持两者？

如果我们在没有警告的情况下支持两者,那么社区将分割使用哪一个.npm上接受类道具的每个组件都必须记住转发它们.如果在中间连一个组件不沿玩,只实现了一个道具,类丢失了-否则你可能结束了class,并className在底部选择"不同意"彼此,没有办法进行应对解决冲突.所以我们认为这会比现状更糟糕,并希望避免这种情况.

所以你应该保持关注.只要这是API所期望的,
我仍然会使用className.

Answer 3

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

您会注意到React使用className而不是传统的DOM类.从文档开始,"由于JSX是JavaScript,因此不鼓励使用类和for等标识符作为XML属性名称.相反,React DOM组件分别需要DOM属性名称,如className和htmlFor."

http://buildwithreact.com/tutorial/jsx

另外,引用zpao(React贡献者/ facebook员工)

我们的DOM组件(主要)使用JS API,因此我们选择使用JS属性(node.className,而不是node.class).

Answer 4

React文档建议使用cannonical React attribute名称而不是传统的Javascript命名,因此即使React允许将属性传递给DOM,它也会给你一个警告.

来自文档:

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

截至 2019 年 6 月，将 className 更改为 class 的过程已停止，稍后可能会继续

这是facebook dev的帖子解释原因

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

Answer 6

ReactJS 中的 Class 与 className 类在 ReactJS 中是保留字或关键字，就像 JavaScript 中的函数一样。这就是为什么我们使用“className”一词来指代该类。