我试图找到正确的方法来定义一些组件,这些组件可以以通用的方式使用:
<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}定义一个包装器组件,如何将某些属性传递给它的所有子组件?
我需要修复上面接受的答案,以使它使用该指针而不是这个指针。在map函数的范围内没有定义doSomething函数。
var Parent = React.createClass({
doSomething: function() {
console.log('doSomething!');
},
render: function() {
var that = this;
var childrenWithProps = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { doSomething: that.doSomething });
});
return <div>{childrenWithProps}</div>
}})
更新:此修复适用于ECMAScript 5,在ES6中不需要var that=this
根据cloneElement()的文档
React.cloneElement(
element,
[props],
[...children]
)
克隆并返回一个新的React元素,使用element作为起始元素
点。生成的元素将具有原始元素的道具
新道具浅浅地融合在一起。新的孩子将取代
现有的儿童。原元素的Key和ref将为
保存了下来。
React.cloneElement()几乎等同于:
<元素。{…元素类型。道具道具}{…}>{孩子}< / element.type >
然而,它也保留了裁判。这意味着如果你有了孩子
有裁判在上面,你就不会不小心从你的祖先那里偷了它。
你会得到相同的引用附加到你的新元素。
因此,您将使用cloneElement为儿童提供自定义道具。然而,组件中可能有多个子组件,您需要循环遍历它。其他答案建议你使用react。children。map来映射它们。然而React. children .map不同于React。cloneElement更改Element附加项和额外的。$作为前缀的键值。查看这个问题了解更多细节:React。React.Children.map中的cloneElement会导致元素键的改变
如果您希望避免它,您应该改用forEach函数,如
render() {
const newElements = [];
React.Children.forEach(this.props.children,
child => newElements.push(
React.cloneElement(
child,
{...this.props, ...customProps}
)
)
)
return (
<div>{newElements}</div>
)
}
我需要修复上面接受的答案,以使它使用该指针而不是这个指针。在map函数的范围内没有定义doSomething函数。
var Parent = React.createClass({
doSomething: function() {
console.log('doSomething!');
},
render: function() {
var that = this;
var childrenWithProps = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { doSomething: that.doSomething });
});
return <div>{childrenWithProps}</div>
}})
更新:此修复适用于ECMAScript 5,在ES6中不需要var that=this
有一种稍微干净一点的方法,试试:
<div>
{React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>
编辑:
要与多个单独的子组件一起使用(子组件本身必须是一个组件),您可以这样做。在16.8.6中测试
<div>
{React.cloneElement(this.props.children[0], { loggedIn: true, testPropB: true })}
{React.cloneElement(this.props.children[1], { loggedIn: true, testPropA: false })}
</div>
用新道具克隆孩子
你可以使用React。子元素遍历子元素,然后使用React.cloneElement用新道具(浅合并)克隆每个元素。
请参阅代码注释,为什么我不推荐这种方法。
const Child = ({childName, sayHello}) => (
<button onClick={() => sayHello(childName)}>{childName}</button>
);
函数父({children}) {
//我们将sayHello函数传递给子元素。
函数sayHello(childName) {
console.log(' Hello from ${childName} the child ');
}
const childrenWithProps = React.Children。映射(children, child => {
//检查isValidElement是安全的方法,可以避免
// typescript错误。
if (React.isValidElement(child)) {
返回的反应。cloneElement(child, {sayHello});
}
返回的孩子;
});
返回< div > {childrenWithProps} < / div >
}
函数App() {
//这种方法不太类型安全,Typescript不友好
//看起来像你试图渲染' Child '没有' sayHello '。
//这也会让代码的读者感到困惑。
回报(
<父>
<Child childName="Billy" />
<Child childName="Bob" />
父> < /
);
}
ReactDOM。render(<App />, document.getElementById("container"));
< script src = " https://unpkg.com/react@17 umd格式/ react.production.min.js " > < /脚本>
< script src = " https://unpkg.com/react-dom@17 umd格式/ react-dom.production.min.js " > < /脚本>
< div id = "容器" > < / div >
将子函数作为函数调用
或者,你可以通过渲染道具将道具传递给孩子们。在这种方法中,children(可以是children或任何其他道具名)是一个函数,它可以接受你想传递的任何参数,并返回实际的子函数:
const Child = ({childName, sayHello}) => (
<button onClick={() => sayHello(childName)}>{childName}</button>
);
函数父({children}) {
函数sayHello(childName) {
console.log(' Hello from ${childName} the child ');
}
//这个组件的children必须是一个函数
//返回实际的子节点。我们可以通过
//它的参数然后传递给他们作为道具(在这个
//如果我们传递' sayHello ')。
返回< div >{孩子(sayHello)} < / div >
}
函数App() {
// sayHello是我们在Parent中传递的参数
//我们现在传递到Child。
回报(
<父>
{(sayHello) => (
<反应。片段>
<Child childName="Billy" sayHello={sayHello} />
<Child childName="Bob" sayHello={sayHello} />
< /反应。片段>
)}
父> < /
);
}
ReactDOM。render(<App />, document.getElementById("container"));
< script src = " https://unpkg.com/react@17 umd格式/ react.production.min.js " > < /脚本>
< script src = " https://unpkg.com/react-dom@17 umd格式/ react-dom.production.min.js " > < /脚本>
< div id = "容器" > < / div >