reactjs - is和className属性不在react元素上一起工作

如果您转到React home page并将属性className='button'添加到第一个示例“A Simple Component”，您应该得到以下结果：

（即带有“Hello Jane”的div现在看起来像一个按钮）

如果您还添加属性is='super-nice-button'，您应该得到以下结果： （即按钮样式消失了）

你为什么这么问？将className与is结合使用时似乎没有在生成的dom节点上生成class属性，而是生成classname（显然对浏览器没有任何意义））。注意下面的差异。

仅使用class属性：

同时具有class和is属性：

我的问题：为什么在反应元素上使用classname属性时反应生成class而不是is（并且基本上会破坏所有样式）？

（背景：我正在使用内联样式（或Fela），我喜欢使用is属性来标记我的div /面板，这样我就可以轻松看到单击“检查元素”时的组件，而不必选中“React devtools”。我理解它是一种黑客，但is是React和HTML中支持的属性，它是一个很好的短语:)）< / em>的

这可能与此有关：

如果你假装它是一个WebComponent，你需要设置class而不是className。

就个人而言，我会采用不同的路线，仍然像React组件一样处理，并以不同的方式进行处理，或者只使用React devtools。

FWIW，这个答案是即时研究的。为了将来的参考，这是流程：

1）使用基本的React JSX小提琴验证行为。确认。

2）搜索了is HTML属性，该属性在前几个链接中显示：

3）查看W3C文档，我了解了is的用途名称。然后我搜索了“反应组件w3c自定义元素”，这很快就导致：

4）在类似WebComponent的DOM上使用class代替className进行验证，同样小提琴。

因此，从完全的无知和一些惊喜中我会说我在大约五分钟内找到答案。