javascript React 中真正的自定义属性（例如微数据）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21648347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
True custom attributes (e.g. Microdata) in React
提问by Chris Pearce
The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope.
我正在开发的站点使用微数据（使用 schema.org）。当我们将开发转移到使用 React 来呈现我们的视图时，我遇到了一个障碍，其中 React 只会呈现 HTML 规范中的属性，但 Microdata 指定了自定义属性，例如itemscope.
As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e.g., Microdata?
由于我对 React 比较陌生并且还没有机会完全理解核心，我的问题是扩展 react.js 的功能以允许定义的自定义属性（例如微数据）的最佳方法是什么？
Is there a way of extending the attributes/props parser or is it a job for a mixin which checks all passed props and modifies the DOM element directly?
有没有一种方法可以扩展属性/道具解析器，或者它是一种检查所有传递的道具并直接修改 DOM 元素的 mixin 的工作？
(Hopefully we'll be able to put together a drop in extension for everyone to provide support for this when a solution is clear.)
（希望我们能够在解决方案明确时为每个人提供一个扩展插件，以便为此提供支持。）
采纳答案by tungd
You should be able to do it with componentDidMount:
你应该能够做到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)
}
}
...
The whole check for Microdata attributes can be wrapped into a mixin for convenient. The problem with this approach is that it won't work for built-in React component (components created by . Update: Looking closer at React.DOM)React.DOM, I come up with this http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview. Basically we wrap the built-in components in a custom component with our mixin. Since your components are built upon React 's built-in DOM components, this would work without you having to include the mixin in the components.
为方便起见，可以将整个微数据属性检查包装到一个 mixin 中。 这种方法的问题在于它不适用于内置的 React 组件（由 创建的组件. 更新：仔细观察React.DOM）React.DOM，我想出了这个http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview。基本上，我们使用 mixin 将内置组件包装在自定义组件中。由于您的组件是基于 React 的内置 DOM 组件构建的，因此无需在组件中包含 mixin 就可以工作。
The real solution would be injecting a custom config instead of React's DefaultDOMPropertyConfig, however I can't find a way to do so in a drop-in manner (DOMPropertyis hidden by the module system).
真正的解决方案是注入自定义配置而不是 React 的DefaultDOMPropertyConfig，但是我找不到以直接方式执行此操作的方法（DOMProperty被模块系统隐藏）。
回答by Christian Steinmann
You can also use "is" attribute. It will disable the attribute white-list of React and allow every attribute. But you have to write classinstead of classNameand forinstead of htmlForif you use is.
您还可以使用“是”属性。它将禁用 React 的属性白名单并允许每个属性。但是你必须写class而不是，className而for不是htmlFor如果你使用is.
<div is my-custom-attribute="here" class="instead-of-className"></div>
Update React 16 custom attributes are now possible
现在可以更新 React 16 自定义属性
In react 16 custom attributes are now possible
在 React 中，现在可以使用 16 个自定义属性
回答by Reggie Pharkle
It looks like these non-standard properties have been added to React
看起来这些非标准属性已经添加到 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
Note that properties have capital letter in the middle:
请注意，属性中间有大写字母：
<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer">
will generate proper lowercase attributes as result.
结果将生成适当的小写属性。
回答by Monyetz
For those who's still looking for answers: https://facebook.github.io/react/docs/tags-and-attributes.html
对于那些仍在寻找答案的人：https: //facebook.github.io/react/docs/tags-and-attributes.html
Example:
例子：
<div itemScope itemType="http://schema.org/Article"></div>
回答by ShawnFumo
So far, the best method I've found is based off of some Amp interop codelinked from a commenton react's bug tracker thread on the subject. I modified it slightly to work with a newer version of React (15.5.4) and TypeScript.
到目前为止，我发现的最好的方法是基于一些 Amp 互操作代码，这些代码链接自关于该主题的 react 的错误跟踪器线程的评论。我稍微修改了它以使用较新版本的 React (15.5.4) 和 TypeScript。
For regular ES6, you can just remove the type annotation for attributeName. Using require was needed in TS since DOMProperty isn't exposed in react's index.d.ts, but again import could be used in regular ES6.
对于常规 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-")
});
}
Now you can use any attribute starting with zz-
现在您可以使用任何以 zz- 开头的属性
<div zz-context="foo" />
Normally it'd be a bad idea to use internal parts of react like this, but I think it is better than any of the other methods. It works the same way as existing open-ended attributes like data- and the JSX is even type safe in TS. I believe the next major version of react is going to do away with the whitelist anyway, so hopefully changes won't be needed before we can remove this shim entirely.
通常，像这样使用 react 的内部部分是一个坏主意，但我认为它比任何其他方法都要好。它的工作方式与现有的开放式属性（如数据）相同，并且 JSX 在 TS 中甚至是类型安全的。我相信 React 的下一个主要版本无论如何都会废除白名单，所以希望在我们完全删除这个 shim 之前不需要更改。
