如何使用 React 循環可重用組件

Question

我正在使用 React，我遇到了一件事，那就是遍歷組件

• 我有一個通用的 inout 字段組件。
• 當我必須創建兩個輸入字段時，我正在定義一個數據並循環輸入組件

我的疑惑

我的疑問是我是否應該在調用它的地方循環輸入組件，如下所示

{

inputData.map((li,ind)=>{
  return(
    <InputComp
    key={ind}
    type={li.type}
    name={li.name}
    id={li.id}
    className={li.className}
    />
  )
})}

或者我應該將數據作為道具傳遞並循環 inout 字段，如下所示

<InputComp data={data}/> // calling the component

{data.map((li,ind)=>{ // inside component looping
  <input
  key={ind}
  type={li.type}
  name={li.name}
  className={li.className}
  />
})}

我有點困惑哪個最好，我的要求可以有多種類型，一種是像上面那樣創建一個普通輸入字段，另一種可以是創建動態輸入字段我可以點擊一個按鈕，我必須添加一個新行和一個刪除該行的按鈕（行表示輸入字段）

所以我寫這篇文章是為了更好地理解代碼，如果還有一個創建輸入組件的選項，我願意使用該代碼。

Answer 1

我會選擇第一種方法，原因如下：

• 您不會僅僅為了呈現多個輸入而制作另一個（可能是一次性使用的）組件。
• 您將數據作為鍵控道具而不是整個 object 傳遞，這使得調試更容易，並使您可以更好地控制該組件。
• 它使您的代碼更嚴格，這樣可以減少代碼中的混亂。

還要提醒你，如果你有.map()元素，你應該給它添加key屬性。

作為后續評論：

因為您基本上有一個額外的組件，所以它可能包含一個錯誤。 這不是瘋狂的區別，但值得一提。 大多數情況下，它會歸結為更好地控制它和該組件的靈活性，因為如果你對數據中的某些東西有條件，你可以在那個map中擁有它，而不是將它放入<InputComp/>並降低它的靈活性.

這方面的例子是：

// This is only mockup
data.map((item) => {
  if(item.name === "dog"){
    return <Input .../>
  }
}

意味着如果你傳遞數據你會做：

// This is only mockup
const Input = (props) => {
  if(props.data.name){
    return <input />
  }
  return <>
}

但是，當您不想在狗身上使用它時，您打算怎么辦？ 制作另一個組件？ 傳遞控制參數？ 重新映射數據？ 那時你可以輸入 map。 它會無緣無故地冒泡代碼。