我正在使用react，我遇到了一个东西，这是通过组件
循环- 我有一个输入字段组件是通用的。
- 当我必须创建两个输入字段时，我定义一个数据并循环输入组件
我怀疑
我的疑问是我是否应该循环调用它的输入组件，就像下面的
{
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}
/>
})}
我有点困惑，哪一个是最好的，我的要求可以有很多类型，一个是像上面创建一个正常的输入字段，另一个可以创建动态输入字段我可以用一个按钮来添加新行再用一个按钮来删除这行(row表示输入字段)
所以我写这篇文章是为了更好地理解代码，如果有一个选项来创建一个输入组件，我是开放的使用该代码。
我选择第一种方法，原因如下:
- 你不做另一个(可能是单一使用)组件只是为了渲染多个输入。
- 你正在传递数据作为关键的道具，而不是整个对象，这使得它更容易调试和给你更多的控制组件。
- 它使你的代码更严格，这是更好的少混乱。
还提醒您，如果您使用.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 <>
}
但是当你不想用在狗身上的时候，你会怎么做呢?制造另一个组件?通过控制参数?重新映射数据?在这一点上，你可以映射输入。它会毫无理由地弹出代码。