javascript - react : Passing parameters in Dumb Component Functions

Question

所以我正在研究一种“中级”级别的 react 项目。我了解基础知识，但不知道某些事情的最佳实践。

让我们假设我正在将一个函数传递给一个“哑”组件，在这个dumb组件中有一个按钮，它是对父函数 Editname 的回调，如下所示:

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

在“Dumb”组件中，有一个按钮调用它，因为它是从其父组件作为 prop 传递的:

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

但是问题是，我还需要将 id 传递给回调函数(我也将 id 作为dumb组件中的 Prop ) 。解决这个问题的最佳方法是什么？我知道一种选择是:

{()=> {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}`);
};

您可以很好地从 Prop 中获取data-id:

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

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

<小时/>正如OP所要求的，这可能不是正确的方式，但它确实减少了每次创建的函数的数量。