将值绑定到函数中以避免将其显式传递给组件

Question

我有以下代码将对象数组的值传递给组件。

{
  recipes.value.map((recipe) => (
    <RecipeBrowserItem
      key={"browse-item-" + recipe.nodeId}
      isMember={recipe.isMember}
      slug={recipe.slug}
      members={recipe.teamRecipe.nodes[0].recipeMembers.totalCount}
      teamRecipeId={recipe.teamRecipe.nodes[0].id}
      teamMemberId={identity.teamMemberId}
      onClickJoin={handleClickJoinRecipe}
    />
  ));
}

在实际组件上，onClickJoin 需要 teamRecipeId 和 teamMemberId 所以我将它们传递下来只是为了使用回调，至少可以绑定 teamRecipeId这样我就不用传下去了？

我基本上就是在做

const handleJoinRecipe = useCallback(() => {
    onClickJoin(teamRecipeId, teamMemberId);
}, [teamRecipeId, teamMemberId]);

Answer 1

根据我对你的问题的理解，你想避免明确地将 props 传递给映射的 RecipeBrowserItem 组件。

首先，将这些道具包装在 child 中的 useCallback 钩子中并不是记忆回调的目的。通常你想记住 parent 组件中的回调，它通过 props 将它作为回调传递给 children。

听起来您想创建一个柯里化的回调来关闭 identity.teamMemberId 值，然后采用特定映射的元素 object 的 recipe.teamRecipe.nodes[0].id 属性。

此模式通常类似于以下内容：

const handleClickJoinRecipe = (teamRecipeId) => () => {
  const teamMemberId = identity.teamMemberId; // <-- close over in scope
  ... additional shared variables/logic ...

  ... use the passed teamRecipeId argument ...

  ...
};

用法示例：

{recipes.value.map((recipe) => (
  <RecipeBrowserItem
    key={"browse-item-" + recipe.nodeId}
    isMember={recipe.isMember}
    slug={recipe.slug}
    members={recipe.teamRecipe.nodes[0].recipeMembers.totalCount}
    onClickJoin={handleClickJoinRecipe(recipe.teamRecipe.nodes[0].id)}
  />
))}

如果您需要记住 handleClickJoinRecipe 回调，请在 parent 组件中进行，使用适当的依赖关系来更新您想要在回调范围内关闭的值。

示例：

const handleClickJoinRecipe = useCallback((teamRecipeId) => () => {
  const teamMemberId = identity.teamMemberId; // <-- close over in scope
  ... additional shared variables/logic ...

  ... use the passed teamRecipeId argument ...

  ...
}, [identity.teamMemberId]);

child 组件现在只需要将传递的 onClickJoin 附加到元素的 onClick 处理程序，它不需要传递任何东西。

onClick={onClickJoin}

将值绑定到函数中以避免将其显式传递给组件

Bind the value into the function to avoid passing it to component explicitly

reactjs

react-hooks