基于className动态添加事件处理程序

Question

我有一个React函数组件，在那里我得到了props中的另一个组件。类似这样的东西：

function ChildComponent({cmp}) {
// Here onClick handlers should be added [for example:
// () => console.log("clicked")] to all
// elements in cmp of class .clickable
return ...
}
function ParentComponent() {
return (
<ChildComponent cmp={<div><button>Non-clickable</button><button className="clickable">Clickable</button></div>} />
)
}

那么，如何将事件处理程序动态添加到ChildComponent中cmp道具变量中类可点击的元素中呢？提前感谢您的帮助。

Answer 1

这使用Children API，允许您根据其当前道具修改儿童道具。ChildComponent将首先循环遍历其当前子级，查找clickableclassName道具，并将onClick处理程序添加到其道具中。

递归循环也允许嵌套的子级工作。

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>
)}
/>
);
}