React中真正的自定义属性(例如微数据)
我正在开发的网站使用微数据(使用schema.org)。当我们将开发转移到使用React来呈现我们的视图时，我遇到了一个障碍，React只会呈现HTML规范中的属性，但是Microdata指定了自定义属性，比如itemscope。
由于我是相对较新的反应，还没有机会完全了解核心，我的问题是，什么是最好的方式来扩展react.js的功能，以允许定义自定义属性，例如，微数据？
有没有一种方法可以扩展属性/ props解析器，或者它是一种混入的工作，可以检查所有传递的props并直接修改DOM元素？
(希望我们能够为每个人提供扩展，以便在解决方案明确时提供支持。)
回答 3
Stack Overflow用户
发布于 2014-11-25 20:21:40
看起来这些非标准属性已经添加到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">将生成适当的小写属性作为结果。
Stack Overflow用户
发布于 2015-08-25 23:42:14
对于那些仍在寻找答案的人：https://facebook.github.io/react/docs/tags-and-attributes.html
示例：
<div itemScope itemType="http://schema.org/Article"></div>Stack Overflow用户
发布于 2017-07-25 19:21:32
到目前为止，我找到的最好的方法是基于react的bug跟踪器线程上的a comment链接的some Amp interop code。我对其稍作修改，以便与较新版本的React (15.5.4)和TypeScript配合使用。
对于常规ES6，您只需删除attributeName的类型注释即可。因为DOMProperty没有在react的index.d.ts中公开，所以在TS中需要使用require，但同样，import也可以在常规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的内部部分不是一个好主意，但我认为它比其他任何方法都要好。它的工作方式与现有的开放式属性(如data)相同-而且JSX在TS中甚至是类型安全的。我相信react的下一个主要版本无论如何都会取消白名单，所以希望在我们完全删除这个填充程序之前不需要进行任何更改。
https://stackoverflow.com/questions/21648347
复制
相似问题
RecyclerView in RecyclerView: ItemDecoration
RecyclerView ItemDecoration
RecyclerView ItemDecoration onDraw
更改每个项目的RecyclerView.ItemDecoration颜色
如何实现特定的RecyclerView ItemDecoration
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
