有趣的话题,为什么jsx用className而不是class
其实官方粗暴的回答就是 jsx是JS而不是什么HTML。 当然react的核心团队回答了在quora上回答了这个问题。 直白翻译下: 其实我们对于这个问题也纠结过,我们这里需要有一个转换,把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的转换。 详情 »