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

Question

背后有不同的原因，但我想知道如何简单地为 JSX 中的元素添加自定义属性？

Answer 1

编辑:更新以反射(reflect) 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

---

上一个答案(React 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/一个工作的例子。 (受 this comment 中 syranide 建议的启发。)