注意: cloneWithPropsは非推奨です。 代わりに、React.cloneElementを使用して下さい。

稀に元の要素から異なるプロパティを持つReact要素の複製を作成したいようなケースがあります。 この1つの例として、this.props.childrenとそれらの異なるプロパティの描画を渡された要素を複製するという方法があります。

var _makeBlue = function(element) {
  return React.addons.cloneWithProps(element, {style: {color: 'blue'}});
};

var Blue = React.createClass({
  render: function() {
    var blueChildren = React.Children.map(this.props.children, _makeBlue);
    return <div>{blueChildren}</div>;
  }
});

React.render(
  <Blue>
    <p>This text is blue.</p>
  </Blue>,
  document.getElementById('container')
);

cloneWithPropsはkeyまたはrefを複製された要素に移しません。 classNameとstyleのプロパティは自動的にマージされます。

 Back to top