React+TypeScript动态生成组件报错：对象不可作为React子元素

问题根源 #

你写的ProjectMenuItem组件直接把单个参数当作用户传入的项目名称，但React函数组件的第一个参数是props对象，不是单个属性值。所以你现在的projectName其实是一个形如{ projectName: "Project 1" }的对象，当你在<p>{projectName}</p>里渲染它时，React就会抛出"对象不能作为React子元素"的错误。

修复方案 #

1. 修正ProjectMenuItem组件的参数接收方式

有两种清晰的写法，同时完善TypeScript类型定义：

• 解构props（推荐，代码更简洁）：

export function ProjectMenuItem({ projectName }: { projectName: string }){
    return(
        <p>{projectName}</p>
    );
}

• 直接使用props对象：

export function ProjectMenuItem(props: { projectName: string }){
    return(
        <p>{props.projectName}</p>
    );
}

2. 优化项目列表的key（可选但推荐）

你之前用Math.random()生成key是不稳定的，React推荐用唯一且固定的标识，比如项目自身的key（project1、project2这些）：

function generateProjectMenuItems() {
    const projectMenuItems = [];
    for (const projectKey in projects) {
        const projectName: string = projects[projectKey as keyof typeof projects].title;
        projectMenuItems.push(<ProjectMenuItem key={projectKey} projectName={projectName} />);
    }
    return projectMenuItems;
}

修复后的完整代码 #

ProjectMenuItem.tsx

export function ProjectMenuItem({ projectName }: { projectName: string }){
    return(
        <p>{projectName}</p>
    );
}

ProjectList.tsx

export function ProjectList(){
    const projects = {
        project1: { title: 'Project 1' },
        project2: { title: 'Project 2' },
        project3: { title: 'Project 3' },
    };
    function generateProjectMenuItems() {
        const projectMenuItems = [];
        for (const projectKey in projects) {
            const projectName: string = projects[projectKey as keyof typeof projects].title;
            projectMenuItems.push(<ProjectMenuItem key={projectKey} projectName={projectName} />);
        }
        return projectMenuItems;
    }
    return(
        <div className="project-list flexbox">
            <p>project components go here</p>
            {generateProjectMenuItems()}
        </div>
    )
}

修改后，页面会正常渲染三个<p>元素，分别显示Project 1、Project 2、Project 3。

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