JSXでカスタムhtml属性を追加する方法

質問

理由は様々ですが、JSXで単純に要素にカスタム属性を追加するにはどうしたらいいのでしょうか？

どのように解決するのですか？

EDIT: 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/ を参照してください。(これは このコメント .)