如何使用 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。 它会无缘无故地冒泡代码。