React js已经有了高阶组件概念来处理这些类型的场景，并且返回了新的组件。

虽然最好将子组件作为props.children传递，但如果您已经使用了“export default”，您的代码应该可以正常工作。也许您可以通过调试来检查props，并查找是否有任何拼写错误。

如果你想把一个组件传递给孩子来呈现它。正确的React方式是把它作为道具传递。children
例如：

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

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

export default ProductList

您可以按如下方式访问列表容器中的子项：

import React, { useState } from "react"

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

export default ListContainer

但是，如果你想把它作为你请求的道具传递，那么正确的语法是：

<React.Fragment>
   <ListContainer  ef={EditForm} />
</React.Fragment >

希望这对你有帮助

最后通过在ListContainer.js中执行以下操作解决了问题

import React from "react"

const ListContainer = (props) => {

// need to use children.types to catch the component in child element

const Edit = props.children.type 

return (
        <React.Fragment>
            <Edit />
        </React.Fragment >
    )
}

export default ListContainer

产品列表.js（与以前相同）

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

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

export default ProductList