You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
37 lines
1.1 KiB
9 years ago
|
---
|
||
|
|
id: clone-with-props-zh-CN
|
||
|
|
title: 克隆 ReactElements
|
||
|
|
permalink: clone-with-props-zh-CN.html
|
||
|
|
prev: test-utils-zh-CN.html
|
||
|
|
next: create-fragment-zh-CN.html
|
||
|
|
---
|
||
|
|
|
||
|
|
> 注意:
|
||
|
|
> `cloneWithProps` 被弃用了. 用 [React.cloneElement](top-level-api.html#react.cloneelement) 代替.
|
||
|
|
|
||
|
|
在很罕见的情况下，你可能需要创建一个 React 元素的拷贝，它与初始的元素有不同的 props。一个例子是克隆这些传递到 `this.props.children` 的元素并用不同的 props 渲染他们。
|
||
|
|
|
||
|
|
```js
|
||
|
|
var cloneWithProps = require('react-addons-clone-with-props');
|
||
|
|
|
||
|
|
var _makeBlue = function(element) {
|
||
|
|
return cloneWithProps(element, {style: {color: 'blue'}});
|
||
|
|
};
|
||
|
|
|
||
|
|
var Blue = React.createClass({
|
||
|
|
render: function() {
|
||
|
|
var blueChildren = React.Children.map(this.props.children, _makeBlue);
|
||
|
|
return <div>{blueChildren}</div>;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
ReactDOM.render(
|
||
|
|
<Blue>
|
||
|
|
<p>This text is blue.</p>
|
||
|
|
</Blue>,
|
||
|
|
document.getElementById('container')
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
`cloneWithProps` 不传递 `key` 或者 `ref` 到被克隆的元素。`className` 和 `style` props 被自动合并。
|