如何正确返回并渲染React组件列表

问题根源 #

1. 你现有写法返回的是字符串模板生成的文本，React不会将普通字符串解析为组件实例，无法正常渲染。
2. 你原代码return内部多套了一层{}，这会被识别为对象字面量，不符合React函数组件返回值要求，本身就会触发语法报错。
3. 直接返回comp只是返回了组件的类/函数引用，并非可渲染的组件实例，所以也不可行。

解决方案 #

直接通过JSX语法渲染存储的组件引用即可，注意列表渲染需要添加唯一key属性，且JSX中使用组件时必须首字母大写：

const list = [Comp1, Comp2, Comp3] 
const RenderComps = () => {
    // map的回调形参首字母大写，符合JSX组件识别规则
    return list.map((Comp, index) => <Comp key={index} />)
    // 实际项目建议用业务唯一ID作为key，而非遍历下标index，避免状态异常
}

如果你偏好非JSX写法，也可以用React.createElement实现等价效果：

import React from 'react'
const list = [Comp1, Comp2, Comp3] 
const RenderComps = () => {
    return list.map((Comp, index) => React.createElement(Comp, { key: index }))
}

内容的提问来源于stack exchange，提问作者Amâncio de Noronha Brito