如何在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>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;

})

返回

function App() {
// 類型安全性較低，但更簡單的替代方案

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

);

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

克隆的替代方案Children

• 提升狀態
：將共享屬性移到父組件的狀態並透過props 傳遞它們。
• Context API
：建立一個用於跨組件共享資料的 Context 對象，無論其層次關係如何。
• Render Props
：在包裝器元件中定義渲染 prop，並將其作為接受 props 的函數傳遞給子元件作為輸入。

以上是如何在React中有效率地將Props傳遞給this.props.children？的詳細內容。更多資訊請關注PHP中文網其他相關文章！