| 3 min read





其实我们对于这个问题也纠结过,我们这里需要有一个转换,把this.props.class 转换成this.props['class'] ,这样你就可以非常方便使用这些class名称。Babel可以完成。但是我们坚持使用className的是下面一些理由:

首先我们尽可能的使用html DOM对象的属性(就像el.className ), 与设置标签属性(attribute)相反。 标签属性始终都是字符串类型,而 对象属性可是任意数据类型,这样的话,算是一种弹性扩展。 其中一个例子就像,classList 属性,相对className而言其实它更适合于数据模型,React现在虽然不支持classList,但是将来计划这么做,采用className更多的是和html属性相仿,更能够说得通。

另外一个理由主要是对于未来的考虑,在未来,React或许会使用对象解构去进行属性的赋值,react-future 展示了一个例子。即使更加现代化的浏览器中,这个也对class并不会生效,也不会像标签中的属性名一样出现。

第三,我们认为 JSX主要的优势是通过匹配闭合标签来让代码更加易于阅读,而不是去替代 html或者xml.虽然非常容易粘贴/复制html代码,但是稍许不同的是(完整闭合的标签)让它稍逊一筹,所以我们有程序去进行html to jsx的转换。最终,为了完全转换html到理想的react代码,这其中会有大量的工作来进行把标记转换成组件,然而将class变成className只是一小部分工作。


We certainly could have done it the other way around. I argued for that for a while. There are transforms that convert this.props.class to this.props['class'] and so using the names class and for would be nearly seamless. Babel includes one. We're sticking with className and htmlFor for a couple of reasons:

First, we tend to look at HTML properties (like el.className = ...) when possible, as opposed to attributes (like el.setAttribute('class', ...)). Attributes are always string-typed, while properties can have any JavaScript object value, which gives more flexibility in some circumstances. One example is the .classList property, which arguably is a better fit for the data model than .className is. React doesn't support classList right now, but it certainly could. Given that React's className behaves like the HTML property of the same name, it makes sense to keep that name.

Another reason is more forward-thinking. In the future, idiomatic React may use object destructuring to pick apart this.props. The react-future repo shows one example of how this could work. Even in modern browsers, this wouldn't work with class and for which are keywords and can't appear as standalone identifiers even though they can appear as property names.

Third, our thinking is that JSX's primary advantage is the symmetry of matching closing tags which make code easier to read, not the direct resemblance to HTML or XML. It's convenient to copy/paste HTML directly, but other minor differences (in self-closing tags, for example) make this a losing battle and we have a HTML to JSX converter to help you anyway. Finally, to translate HTML to idiomatic React code, a fair amount of work is usually involved in breaking up the markup into components that make sense, so changing class to className is only a small part of that anyway.


You Can Speak "Hi" to Me in Those Ways