如何在React菜单项中传递组件

Question

我导入了Report.js组件，并想在菜单项中使用它，我在按钮中尝试了这个，它工作得很好

import Reports from 'new-components/Reports/Reports'   //ontop
<Button> 
<Reports pid={pid} />          //working
</Button>

但是当我在"菜单项">

<MenuItem >
<Reports pid={pid} />            //not working
</MenuItem>

我也尝试在onClick函数中传递组件，我知道我们只能在onClick中传递函数，但这给出了错误

所需的结果

<MenuItem onClick={<Reports pid={name}/>}> 
<Reports pid={name}/>
</MenuItem>

会抛出错误">未捕获错误:期望onClick侦听器是一个函数，而得到了object类型的值。">

Reports.js

return (
<CSVLink {...csvReport}>Export CSV</CSVLink>
)

Answer 1

您可以尝试通过MenuItem的component属性传递Reports元素:

const YourComponent = () => {
return <MenuItem component={<Reports pid={pid} />} />;
}

https://mui.com/material-ui/api/menu-item/道具