React中的真实自定义属性（例如，微数据）

小编典典

React中的真实自定义属性（例如，微数据）

reactjs

我正在开发的网站利用了微数据（使用schema.org）。当我们将开发转移到使用React渲染视图时，我遇到了一个障碍，在该障碍中，React仅会渲染HTML规范中的属性，而Microdata指定了诸如的自定义属性itemscope。

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

是否有扩展属性/道具解析器的方法，还是混合检查的工作，它可以检查所有传递的道具并直接修改DOM元素？

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

阅读 323

2020-07-22

共1个答案

小编典典

您应该能够做到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被模块系统隐藏）的方法。

2020-07-22