Javascript 在react中将材质UI组件作为道具传递

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

从“React”导入React；
从“@material ui/icons/Twitter”导入Twitter图标；
从“/SidebarOption.js”导入SidebarOption；
函数边栏（）{
返回(
);
}
导出默认边栏；

SidebarOption.js

import React from "react";

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

export default SidebarOption;

从“React”导入React；
函数侧选项（{text，Icon}）{
返回(
{text}
);
}
导出默认侧选项；

我得到了下面的错误。图标是问题所在。文本很好用

---

尝试将其作为

传递，并在SidebarOption.js中将其作为

{Icon}

使用尝试将其作为

传递，并在SidebarOption.js中将其作为

{Icon}

使用。您的代码看起来很好。确保安装了for

@material ui/icons

：具体地说，检查Twitter组件的来源是

@material ui/core

。

我觉得你的代码很好。确保安装了for

@material ui/icons

：具体来说，检查推特组件的来源是

@material ui/core

。

@0stone0不，它无法解决问题我正在学习教程（46:06分钟），这是否回答了您的问题@0stone0不，它不能解决问题我正在学习教程（46:06分钟），这能回答你的问题吗？哇！它起作用了！但任何线索都不能解释为什么会这样。我的方法行不通？（我从教程中复制了它）这就是我在评论中提到的你说它不起作用的地方；）很抱歉我没有意识到必须使用{Icon}来调用它，我只改变了前半部分…有没有线索说明为什么我的方法不起作用@0stone0ah抱歉，应该在我的评论中包含这一点。您没有传递组件，而是像传递一样使用道具。现在您只需传递组件，并使用给定的道具。标记的副本似乎与您的问题完全相同。请考虑标记为DUPPLICA。哇！它起作用了！但任何线索都不能解释为什么会这样。我的方法行不通？（我从教程中复制了它）这就是我在评论中提到的你说它不起作用的地方；）很抱歉我没有意识到必须使用{Icon}来调用它，我只改变了前半部分…有没有线索说明为什么我的方法不起作用@0stone0ah抱歉，应该在我的评论中包含这一点。您没有传递组件，而是像传递一样使用道具。现在您只需传递组件，并使用给定的道具。标记的副本似乎与您的问题完全相同。请参阅标示为副本。

import React from "react";

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

export default SidebarOption;