diff --git a/docs/10.5-clone-with-props.ja-JP.md b/docs/10.5-clone-with-props.ja-JP.md new file mode 100644 index 00000000..655f90f8 --- /dev/null +++ b/docs/10.5-clone-with-props.ja-JP.md @@ -0,0 +1,34 @@ +--- +id: clone-with-props +title: ReactElementsをクローンすること +permalink: clone-with-props-ja-JP.html +prev: test-utils-ja-JP.html +next: create-fragment-ja-JP.html +--- + +> 注意: +> `cloneWithProps` は使用不可になりました。[React.cloneElement](top-level-api-ja-JP.html#react.cloneelement)を代わりに使用してください。 + +元のReact要素とは異なるプロパティを持った要素のコピーを作成したいと考える稀なケースがあるかと思います。1つの例としては、以下のように、 `this.props.children` に渡すように要素をクローンし、異なるプロパティを持つようそれらをレンダリングするものです。 + +```js +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
{blueChildren}
; + } +}); + +React.render( + +

This text is blue.

+
, + document.getElementById('container') +); +``` + +`cloneWithProps` は `key` や `ref` をクローンされた要素に渡すことはありません。 `className` や `style` は自動的にマージされます。 \ No newline at end of file