mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Merge pull request #4459 from tako-black/translate_clone-with-props_to_japanese
Translate 10.5-clone-with-props.md to Japanese
(cherry picked from commit 3dcc4b8b90)
This commit is contained in:
@@ -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` は自動的にマージされます。
|
||||
Reference in New Issue
Block a user