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

Question

我正在开发的网站使用Microdata(使用schema.org).当我们将开发转移到使用React来渲染我们的视图时,我遇到了一个阻止程序,其中React只会在HTML规范中呈现属性,但Microdata指定了自定义属性,例如itemscope.

由于我是比较新的反应,还没有机会充分了解的核心,只是还没有,我的问题是什么将是扩展react.js的功能,允许自定义特性,例如,微观数据的最佳方式？

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

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

Answer 1

您还可以使用" 是 "属性.它将禁用React的属性white-list并允许每个属性.但是如果你使用的话,你必须class代替className而for不是代替.htmlForis

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

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

在react 16中,现在可以使用自定义属性

反应16个自定义属性

Answer 2

你应该能够做到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被模块系统隐藏).

Answer 3

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

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

Answer 4

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

例:

<div itemScope itemType="http://schema.org/Article"></div>