在變量中分配一個 MUI 組件，然后在 React 中使用它

Question

我想在變量中存儲一個 MUI 組件，更具體地說是一個 MUI 圖標，例如

item.icon = <FilterListIcon />;

后來，在其他組件中，執行：

<ListItem button key={item.text} onClick={item.onClick}>
    {item.icon &&
        {
            <ListItemIcon>{item.icon}</ListItemIcon> 
        }}
    <ListItemText primary={item.text} />
</ListItem>

但是，當我這樣做時，瀏覽器頁面變空，一切都消失了

我對名稱和其他東西做同樣的事情，但它有效：

item.text = 'Item 1 for spv';
item.onClick = () => navigate('/showPlainVideos');

我該如何解決這個問題？

Answer 1

我猜你正在尋找這樣的東西：

import Button from "@mui/material/Button";

export default function App() {
  const someInstances = [
    <Button variant="contained">Hello World</Button>,
    <Button variant="contained">Hello1 World</Button>,
    <Button variant="contained">Hello2 World</Button>
  ];

  return (
    <div>
      <div>{someInstances}</div>
      {/*do some processing if you want*/}
      <div>{someInstances.map((ins) => ins)}</div>
    </div>
  );
}

codesandbox.io: https://codesandbox.io/s/intelligent-flower-v1dsy?file=/src/App.js:0-437