我正在开发的站点使用微数据（使用 schema.org）。当我们将开发转移到使用 React 来呈现我们的视图时，我遇到了一个障碍，其中 React 只会呈现 HTML 规范中的属性，但 Microdata 指定了自定义属性，例如itemscope.
由于我对 React 比较陌生并且还没有机会完全理解核心，我的问题是扩展 react.js 的功能以允许定义的自定义属性（例如微数据）的最佳方法是什么？
有没有一种方法可以扩展属性/props解析器，或者它是一种检查所有传递的props并直接修改 DOM 元素的 mixin 的工作？
（希望我们能够在解决方案明确时为每个人提供一个扩展插件，以便为此提供支持。）
您还可以使用“是”属性。它将禁用 React 的属性白名单并允许每个属性。但是你必须写class而不是，className而for不是htmlFor如果你使用is.
<div is my-custom-attribute="here" class="instead-of-className"></div>
现在可以更新 React 16 自定义属性
在 React 中，现在可以使用 16 个自定义属性
看起来这些非标准属性已经添加到 React 中了
itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html
itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
请注意，属性中间有大写字母：
<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer">
结果将生成适当的小写属性。
你应该能够做到componentDidMount：
...
componentDidMount: function() {
if (this.props.itemtype) {
this.getDOMNode().setAttribute('itemscope', true)
this.getDOMNode().setAttribute('itemtype', this.props.itemtype)
}
if (this.props.itemprop) {
this.getDOMNode().setAttribute('itemprop', this.props.itemprop)
}
}
...
为方便起见，可以将整个微数据属性检查包装到一个 mixin 中。 这种方法的问题在于它不适用于内置的 React 组件（由 创建的组件. 更新：仔细观察React.DOM）React.DOM，我想出了这个http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview。基本上，我们使用 mixin 将内置组件包装在自定义组件中。由于您的组件是基于 React 的内置 DOM 组件构建的，因此无需在组件中包含 mixin 就可以工作。
真正的解决方案是注入自定义配置而不是 React 的DefaultDOMPropertyConfig，但是我找不到以直接方式执行此操作的方法（DOMProperty被module系统隐藏）。
对于那些仍在寻找答案的人：https : //facebook.github.io/react/docs/tags-and-attributes.html
例子：
<div itemScope itemType="http://schema.org/Article"></div>
到目前为止，我发现的最好的方法是基于一些 Amp 互操作代码，这些代码链接自关于该主题的 react 的错误跟踪器线程的评论。我稍微修改了它以使用较新版本的 React (15.5.4) 和 TypeScript。
对于常规 ES6，您可以删除 attributeName 的类型注释。在 TS 中需要使用 require ，因为 DOMProperty 没有在 react 的 index.d.ts 中公开，但再次导入可以在常规 ES6 中使用。
// tslint:disable-next-line:no-var-requires
const DOMProperty = require("react-dom/lib/DOMProperty");
if (typeof DOMProperty.properties.zz === "undefined") {
DOMProperty.injection.injectDOMPropertyConfig({
Properties: { zz: DOMProperty.MUST_USE_ATTRIBUTE },
isCustomAttribute: (attributeName: string) => attributeName.startsWith("zz-")
});
}
现在您可以使用任何以 zz- 开头的属性
<div zz-context="foo" />
通常，像这样使用 react 的内部部分是一个坏主意，但我认为它比任何其他方法都要好。它的工作方式与现有的开放式属性（如数据）相同，并且 JSX 在 TS 中甚至是类型安全的。我相信 React 的下一个主要版本无论如何都会废除白名单，所以希望在我们完全删除这个 shim 之前不需要更改。