React：在哑组件函数中传递参数

Question

所以我正在从事某种 "intermediate" 级别的 React 项目。我知道基础知识，但不知道某些事情的最佳实践。

假设我正在将一个函数传递给 "Dumb" 组件，在这个哑组件中有一个按钮，它是对父函数 Editname 的回调，如下所示：

editName = (id) => {
    console.log(`Name edited for ${id}`);
}

在 "Dumb" 组件中有一个调用它的按钮，因为它是作为 prop 从它的父级传递的：

<button type="input" onClick={props.editName}>Edit</button>

但是问题是，我还需要将 id 传递给回调函数（我也将 id 作为哑组件中的道具）。最好的方法是什么？我知道一个选项是：

{()=> {props.editName(props.id)} 但有人告诉我这是一种不好的做法，因为每次都会创建该函数。那么 "proper" 的方法是什么？或者我是否需要将其作为 class 并将其作为 class 中另一个函数的回调处理？

Answer 1

为避免每次都创建函数，您可以使用 data-* 属性将标识符附加到目标元素，然后进一步使用它。

例如：

<button type="input" onClick={props.editName} data-id="edit-button">Edit</button>

然后，在函数中，你可以这样：

editName = event => {
  const id = event.target.getAttribute("data-id");
  console.log(`Name edited for ${id}`);
};

你可以很好地从道具中取出data-id:

<button type="input" onClick={props.editName} data-id={props.id}>Edit</button>

您希望如何管理 data-id 属性将取决于用例。

这可能不是 正确的 方法，正如 OP 所要求的那样，但它确实减少了每次创建的函数数量。

Answer 2

为了良好的实践，您应该在代码中使用解构，例如...

const { editName, id } = props;
<button type="input" onClick={editName} data-id={id}>Edit</button>

对于解构实践，请遵循此 link。

React: Passing parameters in Dumb Component Functions