javascript - 在反应中将 Material UI 组件作为道具传递

Question

我想将材料 UI 图标从 Sidebar.js 传递给 SidebarOption。这个想法是在侧边栏中显示侧边栏选项，传递不同的 MUI 图标。

Sidebar.js

import React from "react";
import TwitterIcon from "@material-ui/icons/Twitter";
import SidebarOption from "./SidebarOption.js";

function Sidebar() {
  return (
    <div>
      <SidebarOption Icon={TwitterIcon} text="Home" />
    </div>
  );
}

export default Sidebar;

SidebarOption.js

import React from "react";

function SidebarOption({ text, Icon }) {
  return (
    <div>
      <Icon />
      <h2>{text}</h2>
    </div>
  );
}

export default SidebarOption;

我得到了下面的错误。图标是问题。文字工作正常..

标签： javascriptreactjs

Answer 1

尝试将它作为传递并在 SidebarOption.js 中<SidebarOption Icon={<TwitterIcon />} text="Home" />使用它{Icon}