如何通过循环渲染React组件？解决渲染报错问题

错误原因 #

你在fields数组中存放的是已经实例化的React元素（<Invites />），但在map里却尝试把它当作组件类型去再次实例化（<Item />）。React要求组件类型必须是内置组件字符串、类组件或函数组件，而你传入的是一个React元素对象，因此触发报错。

解决方法 #

方法一：直接渲染数组中的元素 #

因为fields里已经是生成好的React元素，无需再次实例化，直接将数组插入JSX即可：

const fields = [<Invites />]

return (
    <Card style={{ width: 600 }}>
        {fields}
    </Card>
)

如果需要用map（比如添加唯一key），直接返回数组元素：

const fields = [<Invites />]

return (
    <Card style={{ width: 600 }}>
        {fields.map((item, index) => (
            <React.Fragment key={index}>{item}</React.Fragment>
        ))}
    </Card>
)

方法二：数组存储组件引用，动态实例化 #

如果需要后续动态传递props或复用组件逻辑，更推荐在数组中存放组件的函数引用，而非实例：

// 数组存组件函数本身，不是实例
const fields = [Invites]

return (
    <Card style={{ width: 600 }}>
        {fields.map((Item, index) => <Item key={index} />)}
    </Card>
)

这种方式还可以灵活传递props：

const fields = [
  { component: Invites, props: { label: "自定义邀请" } }
]

return (
    <Card style={{ width: 600 }}>
        {fields.map(({ component: Item, props }, index) => (
            <Item key={index} {...props} />
        ))}
    </Card>
)

内容的提问来源于stack exchange，提问作者letters