Javascript 如何解决；元素类型无效"；错误？

我正在尝试使用react制作Twitter克隆，但我面临以下错误

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查

侧选项的渲染方法

这是我的密码：-

app.js

导入“/styles.css”； 从“/components/Sidebar”导入侧栏； 导出默认函数App（）{ 返回( ); } Sidebar.js

从“React”导入React；
从“/SidebarOption”导入SidebarOption；
从“@material ui/icons/Home”导入HomeIcon；
从“@material ui/icons/Explore”导入exploreecon；
从“@material ui/icons/NotificationsActiveIcon”导入NotificationsActiveIcon；
从“@material ui/icons/Email”导入EmailIcon；
从“@material ui/图标/书签”导入书签图标；
从“@material ui/icons/List”导入ListIcon；
从“@material ui/icons/AccountCircle”导入AccountCircleIcon；
从“@material ui/icons/MoreHoriz”导入MoreHorizIcon；
函数边栏（）{
返回(
);
}
导出默认边栏；

SidebarOption.js

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

您没有将

图标

道具传递给下面的道具，而是希望在

侧栏选项

中呈现它。您可以添加一个附加检查，检查

图标

是否未定义，并根据它在

侧选项

内呈现相同的图标：-

      <SidebarOption text="Home" /><HomeIcon/>
      <SidebarOption text="Notifications" />
      <SidebarOption text="Message" />
      <SidebarOption text="Bookmarks" />
      <SidebarOption text="List" />
      <SidebarOption text="Profile" />
      <SidebarOption text="More..." />
      <SidebarOption text="Tweet" />

---

编辑“@Vo Quoc Thang”的回答也应该有效，因为即使你没有通过

图标

道具，你也不会在

侧栏选项

中将其声明为一个组件，而只是一个普通道具。对于

图标

值为

未定义

，它根本不会呈现。

您没有将

图标

道具传递给下面的道具，但您希望在

侧栏选项

中呈现它。您可以添加一个附加检查，检查

图标

是否未定义，并根据它在

侧选项

内呈现相同的图标：-

      <SidebarOption text="Home" /><HomeIcon/>
      <SidebarOption text="Notifications" />
      <SidebarOption text="Message" />
      <SidebarOption text="Bookmarks" />
      <SidebarOption text="List" />
      <SidebarOption text="Profile" />
      <SidebarOption text="More..." />
      <SidebarOption text="Tweet" />

---

编辑“@Vo Quoc Thang”的回答也应该有效，因为即使你没有通过

图标

道具，你也不会在

侧栏选项

中将其声明为一个组件，而只是一个普通道具。对于

图标

值为

未定义

，它根本不会呈现。

您必须传递图标组件并像这样使用

  <SidebarOption Icon={<ExploreIcon></ExploreIcon>} text="Explore" />

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

您必须传递图标组件并像这样使用

  <SidebarOption Icon={<ExploreIcon></ExploreIcon>} text="Explore" />

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

在使用图标之前，您必须检查图标是否已定义：

import React from "react";

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

export default SidebarOption;

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

在使用图标之前，您必须检查图标是否已定义：

import React from "react";

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

export default SidebarOption;

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

什么是

/

exploreCON

，如果它作为一个组件传入，你肯定需要

{Icon}

来代替它？什么是

/

exploreCON

，如果它作为一个组件传入，你肯定需要

{Icon}

来代替它？谢谢，它工作了！！但为什么我不能将其作为组件传递？你可以。您需要在

SidebarOption

中进行额外的检查，使其仅在

图标

未定义时渲染。@VrushabhFasge是的。你也可以。谢谢，成功了！！但为什么我不能将其作为组件传递？你可以。您需要在

SidebarOption

中进行额外的检查，使其仅在

图标

未定义时渲染。@VrushabhFasge是的。你也可以，是的。起初我被误解了。这个解决方案也有效。起初我被误解了。这个解决方案也有效。

import React from "react";

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

export default SidebarOption;