如何將 mui-icon 組件作為道具傳遞給另一個組件？

Question

import React from "react";
import "./SideBarPanel.css";
import AddIcon from "@mui/icons-material/Add";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const SideBarIcon = () => {
  return (
    <div class="sidebar-icon group">
      <AddIcon/>
    </div>
  );
};

const SideBarPanel = () => {
  return (
    <div className="sidebar-icons">
      <SideBarIcon />
      <SideBarIcon />
    </div>
    
  );
};

export default SideBarPanel;

我想將 ExpandMoreIcon 傳遞給第二個 SideBarIcon 組件。

Answer 1

您應該能夠像普通變量一樣通過 props 將組件向下傳遞給子組件。 但是有一個警告：當你在子組件中渲染它時，你必須確保它的第一個字母是大寫字母。

import React from "react";
import "./SideBarPanel.css";
import AddIcon from "@mui/icons-material/Add";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const SideBarIcon = (props) => {
  const {icon: Icon} = props;
  return (
    <div class="sidebar-icon group">
      {Icon && <Icon />}
      <AddIcon/>
    </div>
  );
};

const SideBarPanel = () => {
  return (
    <div className="sidebar-icons">
      <SideBarIcon />
      <SideBarIcon icon={ExpandMoreIcon} />
    </div>
    
  );
};

export default SideBarPanel;

在這里，我在解構時將icon分配給一個新變量Icon 。 這很重要，因為<icon />將不起作用，因為第一個字母沒有大寫。

沙盒

資料來源： https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Answer 2

我會把<Icon />寫成<SideBarIcon />的孩子。 您可以將其作為可選child 。 同樣在這種情況下，您將使用 React 推薦的組件組合。