首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React中真正的自定义属性(例如微数据)

React中真正的自定义属性(例如微数据)
EN

Stack Overflow用户
提问于 2014-02-09 00:09:41
回答 3查看 14.1K关注 0票数 22

我正在开发的网站使用微数据(使用schema.org)。当我们将开发转移到使用React来呈现我们的视图时,我遇到了一个障碍,React只会呈现HTML规范中的属性,但是Microdata指定了自定义属性,比如itemscope

由于我是相对较新的反应,还没有机会完全了解核心,我的问题是,什么是最好的方式来扩展react.js的功能,以允许定义自定义属性,例如,微数据?

有没有一种方法可以扩展属性/ props解析器,或者它是一种混入的工作,可以检查所有传递的props并直接修改DOM元素?

(希望我们能够为每个人提供扩展,以便在解决方案明确时提供支持。)

EN

回答 3

Stack Overflow用户

发布于 2014-11-26 04: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">

将生成适当的小写属性作为结果。

票数 13
EN

Stack Overflow用户

发布于 2015-08-26 07:42:14

对于那些仍在寻找答案的人:https://facebook.github.io/react/docs/tags-and-attributes.html

示例:

<div itemScope itemType="http://schema.org/Article"></div>
票数 5
EN

Stack Overflow用户

发布于 2017-07-26 03: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的下一个主要版本无论如何都会取消白名单,所以希望在我们完全删除这个填充程序之前不需要进行任何更改。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21648347

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档