React传递组件作为Props报错：Element type is invalid问题求助

问题背景 #

我有一个名为EditForm的组件，已在ProductList组件中导入。需要将EditForm组件从ProductList传递给ListContainer组件作为Props，并在ListContainer内部渲染该组件。

预期流程 #

// EditForm.js
const EditForm = () => {...}
export default EditForm

// ProductList.js
import EditForm from "./EditForm"
..
<ListContainer editForm={EditForm} /> // 将editform作为props传递

// ListContainer.js
const ListContainer({editForm: EditForm}) => {
    ...
    <EditForm /> // 在此处使用editform
}

实际代码 #

ProductList.js

import React from "react"
import ListContainer from "../common/ListContainer";
import EditForm from "./EditForm";

const ef = () => {
    return (<EditForm />)
}

const ProductList = () => {
    return (
        <React.Fragment>
            <ListContainer  ef={ef} />
        </React.Fragment >
    )
}

export default ProductList

ListContainer.js

import React, { useState } from "react"

const ListContainer = ({ ef: EditComponent }) => {
    return (
        <React.Fragment>
                <EditComponent />
        </React.Fragment >
    )
}

export default ListContainer

报错信息 #

运行后出现错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function

解决方案 #

问题出在组件传递方式上，无需额外封装函数，直接传递EditForm组件本身即可：

修改后的ProductList.js：

import React from "react"
import ListContainer from "../common/ListContainer";
import EditForm from "./EditForm";

const ProductList = () => {
    return (
        <React.Fragment>
            <ListContainer ef={EditForm} />
        </React.Fragment >
    )
}

export default ProductList

ListContainer.js保持不变即可。

原因说明 #

你之前封装的ef函数返回的是<EditForm />，这是一个已渲染的React元素，而非组件本身。React要求作为Props传递的可渲染组件必须是类或函数类型（即组件定义），而非已实例化的元素。直接传递EditForm组件后，ListContainer中的EditComponent就是该组件的定义，渲染<EditComponent />就能正确生成对应的UI元素。

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