如何解决“元素类型无效”错误？答案

【问题标题】：How to solve "Element type is invalid" Error?如何解决“元素类型无效”错误？
【发布时间】：2021-03-24 09:51:12
【问题描述】：

我正在尝试使用 react 制作 Twitter 克隆，但遇到以下错误。

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

这是我的代码：-

app.js

import "./styles.css";
import Sidebar from "./components/Sidebar";

export default function App() {
  return (
    <div className="App">
      <Sidebar />
    </div>
  );
}

Sidebar.js

import React from "react";
import SidebarOption from "./SidebarOption";
import HomeIcon from "@material-ui/icons/Home";
import ExploreIcon from "@material-ui/icons/Explore";
import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive";
import EmailIcon from "@material-ui/icons/Email";
import BookmarksIcon from "@material-ui/icons/Bookmarks";
import ListIcon from "@material-ui/icons/List";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";

function Sidebar() {
  return (
    <div>
      <SidebarOption Icon={HomeIcon} text="Home" />
      <SidebarOption Icon={ExploreIcon} text="Explore" />
      <SidebarOption text="Notifications" />
      <SidebarOption text="Message" />
      <SidebarOption text="Bookmarks" />
      <SidebarOption text="List" />
      <SidebarOption text="Profile" />
      <SidebarOption text="More..." />
      <SidebarOption text="Tweet" />
    </div>
  );
}

export default Sidebar;

SidebarOption.js

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

export default SidebarOption;

【问题讨论】：

<Icon /> / ExploreIcon 是什么，如果它作为组件传入，你肯定需要 { Icon } 代替吗？

标签： javascript reactjs

【解决方案1】：

你必须传递你的 Icon 组件并像这样使用

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

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

export default SidebarOption;

【讨论】：

谢谢，成功了！！但为什么我不能将它作为组件传递？例如。
@Vrushabh Fasge 你可以。您需要在 SidebarOption 内进行额外检查，以便它仅在 Icon 未定义时呈现。
@VrushabhFasge 是的。你也可以。

【解决方案2】：

您没有将Icon 属性传递给下面的属性，但您希望将其呈现在SidebarOption 中。您可以添加额外的检查以检查 Icon 是否未定义，并基于它在 SidebarOption 内呈现相同的内容。 :-

      <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 的答案也应该有效，因为即使您没有通过 Icon 道具，您也不会在 SidebarOption 中将其声明为组件但只是一个普通的道具。对于Icon 值为undefined，它根本不会渲染。

【讨论】：

是的。一开始我被误解了。这个解决方案也有效。

【解决方案3】：

您必须在使用前检查 Icon 是否已定义：

import React from "react";

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

export default SidebarOption;

【讨论】：