Next.js中如何渲染与导入名称同名的组件数组？

你遇到的核心问题是：React无法直接将字符串作为组件名渲染，且原代码的map函数未返回JSX内容。以下是具体解决思路和修正后的代码：

问题分析 #

1. React渲染组件需要传入组件对象引用，你数组中存储的是组件名称字符串，无法直接用于JSX渲染；
2. 原代码的map函数没有显式返回JSX元素，导致循环后无内容输出。

解决步骤 #

1. 将导入的组件存入一个对象，用组件名称字符串作为键，建立字符串到组件对象的映射；
2. 遍历数组时，从映射对象中取出对应的组件；
3. 确保map函数返回JSX元素。

修正后的代码 #

import _01 from './components/01.js' 
import _02 from './components/02.js' 
import _03 from './components/03.js'

export default function xpto(){ 
    // 建立组件名称与组件对象的映射
    const componentMap = {
        _01,
        _02,
        _03
    }
    // 数组可简化为直接存储组件名称字符串（若无需额外属性）
    const myArray = ['_01', '_02', '_03']

    return (
        <div>
            {myArray.map((compName, index) => {
                // 根据字符串取出对应的组件对象
                const Comp = componentMap[compName]
                // 必须返回JSX元素
                return (
                    <div key={index}>
                        <Comp />
                    </div>
                )
            })}
       </div>
    )
}

如果需要保留数组的对象结构（比如示例中包含额外字段），可以这样修改：

export default function xpto(){ 
    const componentMap = { _01, _02, _03 }
    const myArray = [{Comp:'_01'},{Comp:'_02'},{Comp:'_03'}]

    return (
        <div>
            {myArray.map((item, index) => {
                const Comp = componentMap[item.Comp]
                return (
                    <div key={index}>
                        <Comp />
                    </div>
                )
            })}
       </div>
    )
}

关键说明 #

• JSX中的自定义组件名必须是大写开头的变量（React约定，用于区分原生HTML标签），所以我们将取出的组件赋值给Comp变量；
• 不能用<${Comp} />这种模板语法，JSX编译时不支持动态字符串拼接生成组件名，必须通过对象映射获取组件引用。

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