如何在 React mui menuItem 中傳遞組件

Question

我導入了 Report.js 組件並想在“menuitem”中使用它，我在按鈕中嘗試了這個並且它工作得很好

 import Reports from 'new-components/Reports/Reports'   //ontop

 <Button> 
    <Reports pid={pid} />          //working
 </Button>

但是當我在“menuitem”中嘗試同樣的方法時，它不起作用

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

我也嘗試在 onClick 函數中傳遞組件，我知道我們只能在 onClick 中傳遞函數，但這會給出所需的結果但有錯誤

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

它拋出一個錯誤“未捕獲的錯誤：預期onClick偵聽器是一個函數，而不是得到一個object類型的值。 ”

報告.js

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

Answer 1

您可以嘗試通過MenuItem的component屬性傳遞您的Reports元素：

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