React：在啞組件函數中傳遞參數

Question

所以我正在研究一種“中級”級別的反應項目。 我知道基礎知識，但不知道某些事情的最佳實踐。

讓我們假設我正在將一個函數傳遞給一個“啞”組件，在這個啞組件中是一個按鈕，它是對父函數Editname的回調，它看起來像這樣：

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

在 "Dumb" 組件中，有一個按鈕調用它，因為它是從它的父級作為道具傳遞的：

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

對於解構實踐，請遵循此鏈接。