将一个带有event和其他参数的函数作为prop传递给子组件

Question

我已经完成了导航栏，需要更复杂。我有几个链接，只提供给具有一定权限的用户。如果他们没有这些权限，那么就会触发一个模态，让他们知道他们需要升级。

部分导航在父组件中，更多的是在子组件中。在父组件中，我有一个函数来检查它们是否有正确的权限，如果有，则遵循链接，如果没有，则打开一个模态。

const openModalOrFollowLink = (link, title, hasPermissions) => (e) => {
e.preventDefault();
if (hasPermissions) {
// Here I'm setting some state based on what the title argument is
// setSomeState(title)
setModalVisible(true);
} else {
history.push(target);
}
};

在同一个组件中，我有一个onClick调用这个函数:

onClick={(e) => openModalOrFollowLink(link, label, displayUpgradeMessages)(e)}

我将这个组件传递给子组件，像这样:

openModalOrFollowLink={openModalOrFollowLink(
link,
label,
hasPermissions
)}

在子组件中，我使用了这个作为prop传递的函数，如下所示:

onClick={(e) => openModalOrFollowLink(link, title, hasPermissions)(e)}

但是在函数中，我得到了一个错误，因为它没有得到事件:

Uncaught TypeError: e.c preventdefault不是一个函数

如何将事件从子节点传递到父节点，以防止链接被自动跟踪。

Answer 1

这就是我最终成功的方法

const Parent = () => {
const openModalOrFollowLink = (link, title, hasPermissions) => (e) => {
e.preventDefault();
if (hasPermissions) {
// Here I'm setting some state based on what the title argument is
// setSomeState(title)
setModalVisible(true);
} else {
history.push(target);
}
};
...
return(
<Child 
openModalOrFollowLink={(e) =>
openModalOrFollowLink(
link,
title,
hasPermissions
)(e)
} />

}
const Child = (openModalOrFollowLink) => {
return (
<Link onClick={openModalOrFollowLink}> 
)
}