diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index 71fd15ca..d731f25f 100644 --- a/_data/nav_docs.yml +++ b/_data/nav_docs.yml @@ -56,7 +56,7 @@ - id: test-utils title: Test Utilities - id: clone-with-props - title: Cloning Components + title: Cloning Elements - id: create-fragment title: Keyed Fragments - id: update diff --git a/docs/10.5-clone-with-props.md b/docs/10.5-clone-with-props.md index 7e832ac0..37fd92e8 100644 --- a/docs/10.5-clone-with-props.md +++ b/docs/10.5-clone-with-props.md @@ -1,23 +1,34 @@ --- id: clone-with-props -title: Cloning ReactElement +title: Cloning ReactElements permalink: clone-with-props.html prev: test-utils.html next: create-fragment.html --- -In rare situations an element may want to change the props of an element that it doesn't own (like changing the `className` of an element passed as `this.props.children`). Other times it may want to make multiple copies of an element passed to it. `cloneWithProps()` makes this possible. +> Note: +> `cloneWithProps` is deprecated. Use [React.cloneElement](top-level-api.html#react.cloneelement) instead. -#### `ReactElement React.addons.cloneWithProps(ReactElement element, object? extraProps)` +In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into `this.props.children` and rendering them with different props: -Do a shallow copy of `element` and merge any props provided by `extraProps`. The `className` and `style` props will be merged intelligently. +```js +var _makeBlue = function(element) { + return React.addons.cloneWithProps(element, {style: {color: 'blue'}}); +}; -> Note: -> -> `cloneWithProps` does not transfer `key` to the cloned element. If you wish to preserve the key, add it to the `extraProps` object: -> -> ```js -> var clonedElement = cloneWithProps(originalElement, { key : originalElement.key }); -> ``` -> -> `ref` is similarly not preserved. +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` does not transfer `key` or `ref` to the cloned element. `className` and `style` props are automatically merged.