Kohei TAKATA
10 years ago
1 changed files with 34 additions and 0 deletions
@ -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 <div>{blueChildren}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<Blue> |
|||
<p>This text is blue.</p> |
|||
</Blue>, |
|||
document.getElementById('container') |
|||
); |
|||
``` |
|||
|
|||
`cloneWithProps` は `key` や `ref` をクローンされた要素に渡すことはありません。 `className` や `style` は自動的にマージされます。 |
Loading…
Reference in new issue