在反应中将 Material UI 组件作为道具传递答案

【问题标题】：Passing Material UI components as props in react在反应中将 Material UI 组件作为道具传递
【发布时间】：2021-06-04 21:20:50
【问题描述】：

我想将材质 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;

我收到以下错误。图标是问题。文字工作正常..

【问题讨论】：

@0stone0 不，它不能解决问题
我正在关注教程youtube.com/watch?v=rJjaqSTzOxI（46:06 分钟）
这能回答你的问题吗？ Material UI - passing icon as a prop

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

哇！有用！但任何线索为什么这有效。我的方法行不通？（我从教程中复制的）
这就是我发表的评论，你说它不起作用；）
对不起！我没有意识到必须使用 {Icon} 调用它，我只更改了前半部分......任何线索为什么我的方式不起作用？ @0stone0
啊抱歉，应该在我的评论中包含它。您没有传递组件，而是像以前一样使用道具。现在您只是传递组件，并使用给定的道具。标记的重复项似乎与您的问题完全相同。请考虑标记为重复。
为我工作！！

【解决方案2】：

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

【讨论】：