为啥我会收到“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）......”？

Posted 2023-02-22

【中文标题】为啥我会收到“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）......”？

【英文标题】：Why am I getting "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."?为什么我会收到“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）......”？

【发布时间】：2019-07-10 19:07:13

【问题描述】：

当我尝试在我的 NextJs 应用程序中从 React-Icons 导入图标时，我遇到了这个问题 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 。

在下面查看我的代码。

import React from "react";

import MdPlayCircleOutline from "react-icons";

const Podcast = props => 
  return (
    <div className="podcast">
      <div className="podcastName">
        <h4>props.title</h4>
      </div>

      <MdPlayCircleOutline />
    </div>
  );
;

export default Podcast;

为什么会这样？

【问题讨论】：

你能尝试像这样导入吗： import MdPlayCircleOutline from "react-icons"

是的，我试过了，但是不行

【参考方案1】：

每个图标集都有自己的文件夹。对于 Material Design 图标，它是'./md'。所以，导入应该是：

import  MdPlayCircleOutline  from 'react-icons/md' 

见：http://react-icons.github.io/react-icons/#usage

【讨论】：

哇，我没有注意到这一点。非常感谢兄弟！