1 回答

TA貢獻(xiàn)1835條經(jīng)驗 獲得超7個贊
這使用了Children API,該API 允許您根據(jù)當(dāng)前的道具修改兒童的道具。ChildComponent 將首先循環(huán)遍歷其當(dāng)前子項,查找clickable className道具onClick并向其道具添加處理程序。
遞歸循環(huán)也允許嵌套子項工作。
function ChildComponent({ cmp }) {
const handleOnClick = () => {
alert("Clicked");
};
const childrenMap = (child) => {
if (child.props) {
const newProps = Object.assign({}, child.props);
const { children, className } = newProps;
if (className && className.split(' ').some(cn => cn === 'clickable')) {
newProps.onClick = handleOnClick;
}
if (children) {
newProps.children = Children.map(children, childrenMap);
}
return cloneElement(child, newProps);
}
return child;
}
return Children.map(cmp, childrenMap);
}
function ParentComponent() {
return (
<ChildComponent
cmp={(
<div>
<button>Non-clickable</button>
<div>
<div>
<button className="clickable">Clickable</button>
</div>
</div>
<button className="clickable">Clickable</button>
</div>
)}
/>
);
}
添加回答
舉報