在反应中将 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;

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

Answer 1

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

Answer 2

你的代码对我来说看起来不错。 确保安装了@material-ui/icons的对等依赖项：具体来说，检查@material-ui/core ，这是 Twitter 组件的来源。