is 和 className 属性不能在反应元素上一起工作

Question

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

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

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

你为什么问？似乎当您将 className 与 is 结合使用时，react 不会在结果 dom 节点上生成 class 属性，而是生成 classname （这显然对浏览器没有意义）。请注意下面的区别。

只有class 属性：

同时使用 class 和 is 属性：

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

（背景：我正在使用内联样式（或Fela）并且我喜欢使用is 属性来标记我的div/面板，这样我可以在单击“检查元素”，而无需切换到“React devtools”。我知道这是一种 hack，但 is 是 React 和 HTML 中受支持的属性，这是一个很好的简短词:))

Answer 1

这可能与此有关：

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

如果您假装它是 Web 组件，则需要设置 class 而不是 className。

我个人会走不同的路线，仍然像 React 组件一样处理它，并以不同的方式进行，或者只使用 React 开发工具。

---

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

1) 使用基本的 React JSX fiddle 验证行为。已确认。

2) 搜索is HTML 属性，该属性在前几个链接中指向此处：

What is HTML "is" attribute?

3) 查看 W3C 文档，我了解了 is 的名称。然后我搜索了“react components w3c custom elements”，这很快导致：

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

4) 在类似 WebComponent 的 DOM 上使用 class 而不是 className 进行验证，同样的小提琴。

因此，出于完全的无知和一些惊讶，我会说我在大约五分钟内找到了答案。