22

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

由于我对 React 比较陌生并且还没有机会完全理解核心，我的问题是扩展 react.js 的功能以允许定义的自定义属性（例如，微数据）的最佳方法是什么？

有没有一种扩展属性/道具解析器的方法，或者它是一个混合检查所有传递的道具并直接修改DOM元素的工作？

（希望我们能够为每个人提供一个临时扩展，以便在解决方案明确时为此提供支持。）

4

5 回答 5

53

您也可以使用“是”属性。它将禁用 React 的属性白名单并允许每个属性。但是如果你class使用. className_forhtmlForis

<div is my-custom-attribute="here" class="instead-of-className"></div>

现在可以更新 React 16 自定义属性

在 react 16 自定义属性现在是可能的

React 16 自定义属性

于 2015-11-22T22:15:09.363 回答
13

看起来这些非标准属性已添加到 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">

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

于 2014-11-25T20:21:39.603 回答
10

你应该能够做到这一点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)
  }
}
...

为方便起见，可以将对 Microdata 属性的整个检查包装到一个 mixin 中。这种方法的问题是它不适用于内置的 React 组件（由创建的组件React.DOM）. 更新：仔细观察React.DOM，我想出了这个http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview。基本上，我们使用 mixin 将内置组件包装在自定义组件中。由于您的组件是基于 React 的内置 DOM 组件构建的，因此您无需在组件中包含 mixin 即可工作。

真正的解决方案是注入自定义配置而不是 React 的DefaultDOMPropertyConfig，但是我找不到以插入方式执行此操作的方法（DOMProperty被模块系统隐藏）。

于 2014-02-09T03:32:26.543 回答
5

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

例子：

<div itemScope itemType="http://schema.org/Article"></div>
于 2015-08-25T23:42:13.713 回答
0

到目前为止，我发现的最好的方法是基于一些 Amp 互操作代码，这些代码链接自关于该主题的 react 的错误跟踪线程的评论。我稍微修改了它以使用更新版本的 React (15.5.4) 和 TypeScript。

对于常规的 ES6，您可以只删除属性名称的类型注释。在 TS 中需要使用 require，因为 DOMProperty 没有在 react 的 index.d.ts 中公开，但是 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 的下一个主要版本无论如何都会取消白名单，所以希望在我们完全删除这个 shim 之前不需要进行更改。

于 2017-07-25T19:21:31.527 回答