Question

因此，我正在从事某种“中级”水平的反应项目。我了解基础知识，但不了解某些方面的最佳实践。

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

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

在“哑巴”组件中，有一个按钮可以调用此按钮，因为它是作为道具从其父级传递来的：

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

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

{()=> {props.editName(props.id)}，但有人告诉我这是一种不好的做法，因为该函数每次都会创建。那么执行此操作的“正确”方法是什么？还是我需要将其作为一个类并将其作为对该类中另一个函数的回调进行处理？

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>

有关销毁方法，请点击此链接。