React中的真实自定义属性（例如微数据） [英] True custom attributes (e.g. Microdata) in React

问题描述

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

The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope.

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

As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e.g., Microdata?

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

Is there a way of extending the attributes/props parser or is it a job for a mixin which checks all passed props and modifies the DOM element directly?

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

(Hopefully we'll be able to put together a drop in extension for everyone to provide support for this when a solution is clear.)

推荐答案

你应该可以用 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即可使用。

The whole check for Microdata attributes can be wrapped into a mixin for convenient. The problem with this approach is that it won't work for built-in React component (components created by React.DOM). Update: Looking closer at React.DOM, I come up with this http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview. Basically we wrap the built-in components in a custom component with our mixin. Since your components are built upon React 's built-in DOM components, this would work without you having to include the mixin in the components.

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

The real solution would be injecting a custom config instead of React's DefaultDOMPropertyConfig, however I can't find a way to do so in a drop-in manner (DOMProperty is hidden by the module system).

这篇关于React中的真实自定义属性（例如微数据）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！