我想將事件道具從 Child 傳遞給 Parent，所以當我們單擊 Child 組件中的按鈕時，應該觸發來自 Parent 的狀態。
假設我們有兩個組件，Parent和Child，但Child不會直接匯入Parent，像這樣
export default function Parent() {
const [count, setCount] = useState(0);
const handleClick = num => {
setCount(current => current num);
};
return (
<div>
<Child handleClick={handleClick} />
<h2>Count: {count}</h2>
</div>
);
}
在這種情況下傳遞 prop 是非常困難的，但是當我們遇到 Parent 不知道哪個組件將作為{children}prop 傳遞的情況時怎么辦，像這樣：
export default function Parent({children}) {
const [count, setCount] = useState(0);
const handleClick = num => {
setCount(current => current num);
};
return (
<div>
{children}
</div>
);
}
然后我們匯入一些子組件
<Parent>
<Child />
</Parent>
uj5u.com熱心網友回復：
您可以cloneElement與React.Children.map. cloneElement使用給定元素作為起點克隆并回傳一個新的 React 元素。您可以在頂部添加道具、參考和鍵。
React.Children.map將對每個直接子級呼叫一個函式。
//function body
....
let newChildren = React.Children.map(children, (child) => React.cloneElement(child, { handleClick })
);
return (
<div>
{newChildren}
</div>
);
例子
uj5u.com熱心網友回復：
這會將父母與孩子結合起來。children財產是專門為了確保父母不關心孩子是什么。
將狀態和回呼向上推送到組件層次結構，到知道父組件和子組件的特定型別的組件。
const [count, setCount] = useState(0);
return (<Parent count={count}>
<Child onClick={num => setCount(count => count num} />
</Parent>);
uj5u.com熱心網友回復：
簡單地說，您可以通過cloneElement這樣的方式實作這一目標。
export const Parent = ({children}) => {
const handleClick = () => {
console.log('okk')
}
return (
<div>
{ React.cloneElement(children, { handleClick} )}
</div>
)}
現在您可以handleClick從子組件觸發功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522649.html
標籤：反应状态