如何将道具传递给{this.props.children}
我试图找到正确的方式来定义一些可以以通用方式使用的组件：
<Parent>
<Child value="1">
<Child value="2">
</Parent>
当然，在父组件和子组件之间进行渲染时有一种逻辑，你可以将<select>和<option>想象成这种逻辑的一个例子。
这是针对该问题的虚拟实现：
var Parent = React.createClass({
doSomething: function(value) {
},
render: function() {
return (<div>{this.props.children}</div>);
}
});
var Child = React.createClass({
onClick: function() {
this.props.doSomething(this.props.value); // doSomething is undefined
},
render: function() {
return (<div onClick={this.onClick}></div>);
}
});
问题是，无论何时使用{this.props.children}来定义一个包装组件，如何将某些属性传递给它的所有子项？
您可以使用React.Children遍历子元素，然后使用React.cloneElement使用新的道具（浅层合并）克隆每个元素，例如：
const Child = ({ doSomething, value }) => (
<div onClick={() => doSomething(value)}>Click Me</div>
);
class Parent extends React.PureComponent {
doSomething = (value) => {
console.log('doSomething called by child with value:', value);
}
render() {
const { children } = this.props;
const childrenWithProps = React.Children.map(children, child =>
React.cloneElement(child, { doSomething: this.doSomething }));
return <div>{childrenWithProps}</div>
}
};
ReactDOM.render(
<Parent>
<Child value="1" />
<Child value="2" />
</Parent>,
document.getElementById('container')
);
小提琴：https：//jsfiddle.net/2q294y43/2/
要获得一个稍微干净的方法，请尝试：
<div>
{React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>
注意 ：只有在有一个孩子的情况下，它才有效，它是一个有效的React元素。
尝试这个
<div>{React.cloneElement(this.props.children, {...this.props})}</div>
它为我使用react-15.1。
链接地址: http://www.djcxy.com/p/4743.html