如何在JSX中添加自定义html属性

编辑：更新以反映React 16

React 16本机支持自定义属性。这意味着向元素添加自定义属性现在就像将其添加至render函数一样简单，如下所示：

render() {
  return (
    <div custom-attribute="some-value" />
  );
}

有关更多信息：
https : //reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes
https://facebook.github.io/react/blog/ 2017/09/08 / dom-attributes-in-react-16.html

先前的答案（第15和更早版本）

当前不支持自定义属性。有关更多信息，请参见此未解决的问题：https : //github.com/facebook/react/issues/140

作为解决方法，您可以在中执行以下操作componentDidMount：

componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}

有关工作示例，请参见https://jsfiddle.net/peterjmag/kysymow0/。（受此评论中 syranide的建议启发。）