将带有事件和其他参数的函数作为 prop 传递给子组件答案

【问题标题】：Passing a function as prop with event and other arguments to a child component将带有事件和其他参数的函数作为 prop 传递给子组件
【发布时间】：2023-01-11 13:21:38
【问题描述】：

我已经相当完整的导航栏需要更复杂。我有几个链接只对具有特定权限的用户可用。如果他们没有这些权限，则会触发一个模式，让他们知道他们需要升级。

部分导航位于父组件中，更多导航位于子组件中。在父组件中，我有一个函数来检查他们是否拥有正确的权限，如果他们这样做，它会跟随链接，如果他们不这样做，它会打开一个模式。

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

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

未捕获的类型错误：e.preventDefault 不是函数

我怎样才能从孩子那里得到事件给父母，这样我就可以防止链接被自动跟踪。

【问题讨论】：

你能用一个例子组成一个codesandbox吗？从这些点点滴滴拼凑出全貌有点困难。乍一看，您似乎正在将二级函数传递给 openModalOrFollowLink prop - 即在孩子的 onClick 中，被调用的 openModalOrFollowLink 实际上是 (e) => { ...}，而不是 (a,b,c) => (e) => {...}
只是出于好奇。你试过(e)(link, title, hasPermissions)吗？
@YegorBelov 我仍然需要将 a、b、c 作为参数传递。我会尝试让 codesandbox 运行
@bonum_cete 也许你打算在道具中传递openModalOrFollowLink={openModalOrFollowLink}？然后孩子实际上会传递所有参数（至少从我在这里看到的）
@bonum_cete openModalOrFollowLink={ () => openModalOrFollowLink... 可以解决这个问题吗？

标签： javascript reactjs

【解决方案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}> 
  )
}

【讨论】：