如何在React中高效地将Props传递给this.props.children？

如何将 Props 传递给 {this.props.children}

简介

在React中，你可能会遇到想要使用包装组件的场景封装一组子组件并向它们传递一些公共属性。

使用新 Props 克隆子组件

一种方法是使用 React.Children迭代子元素并使用 React.cloneElement 使用新的 props 克隆每个元素。但是，由于潜在的代码脆弱性，不建议使用此方法。

<br>const Child = ({ childName, sayHello }) =>; (<br> <button onclick="{()"> sayHello(childName)}>{childName}</button><br>);</p><p>function Parent({ Children }) {<br> 函数 sayHello(childName) {</p><pre class="brush:php;toolbar:false">console.log(`Hello from ${childName} the child`);

}

const ChildrenWithProps = React.Children.map(children, child => {

if (React.isValidElement(child)) {
  return React.cloneElement(child, { sayHello });
}
return child;

});

返回

{childrenWithProps}

;
}

function App() {
// 类型安全性较低，但更简单的替代方案
return (

<Parent>
  <Child childName="Billy" />
  <Child childName="Bob" />
</Parent></button>

);
}

ReactDOM.render(, document.getElementById("container"));
;

克隆的替代方案Children

要将属性传递给子组件，请考虑以下替代方案：

• 提升状态：将共享属性移动到父组件的状态并通过 props 传递它们。
• Context API：创建一个用于跨组件共享数据的 Context 对象，无论其层次关系如何。
• Render Props：在包装器组件中定义渲染 prop，并将其作为接受 props 的函数传递给子组件作为输入。

以上是如何在React中高效地将Props传递给this.props.children？的详细内容。更多信息请关注PHP中文网其他相关文章！