我在将找到的现有 React 组件集成到我的应用程序中时遇到问题。 “尝试导入错误：”

Question

我的目标是将我在网上找到的现有 React 组件（如下）引入我的应用程序中以供使用。 它是一个动画导航栏。

这是我在尝试编译以下代码后收到的错误消息（下面的代码段 2 和 3）：

Failed to compile.

./src/components/Navbar.js
Attempted import error: 'react-responsive-animate-navbar' does not contain a default export (imported as 'ReactNavbar').

也许我安装的库有问题？ 创建者在 7 个月前制作了这个组件，在这里 - https://www.npmjs.com/package/react-responsive-animate-navbar 。

无论如何，请参阅下面的详细信息 1. 我试图引入的组件，2. 我代码中的组件，稍微重构了 3. 我将此组件导入到的文件。

这是我在网上找到的组件。 它呈现了一个很棒的导航栏，我想带入我的应用程序。 但是，我从未使用过“类...扩展组件”语法。 我只使用了“导出默认函数名称(){return()}”样式。

npm install --save react-responsive-animate-navbar

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";
 
class Example extends Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/" },
          { name: "ARTICLES", to: "/articles" },
          { name: "ABOUT ME", to: "/about" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }
}

这是组件，因为我已将其引入我的应用程序并对其进行了轻微重构以适应我一直使用的 React 语法。

./src/components/Navbar.js

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";

export default function Navbar({ setSignedIn }) {
  return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/Explore" },
          { name: "ARTICLES", to: "/articles" },
          { name: "My Profile", to: "/profile" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }

最后，这是我尝试导入此组件以将其呈现到实际页面上的地方。

./src/Pages/IntroPage

import React from "react";
import Navbar from "../components/Navbar";
import Categories from "../components/Categories";

export default function ChooseACategory({ setSignedIn }) {
  return (
    <div>
      <Navbar setSignedIn={setSignedIn} />
      <Categories />
    </div>
  );
}

我怀疑问题在于我从“类...扩展组件”语法重构为“导出默认函数名称”语法（我更熟悉）。 我知道两者之间没有太大区别，但我宁愿让我的这个项目的代码保持统一。 欢迎任何帮助！

Answer 1

你重构没有错，因为你没有使用任何状态。 我安装了那个包，没有任何改变。 当我启动它时，出现了与您相同的错误消息。 我怀疑这个包本身是不可运行的。

Answer 2

对于我的情况，我找到了一个解决方法，它无法使用下面屏幕截图中突出显示的编辑来呈现和正常工作。 谢谢！

   import React from "react";
    import * as ReactNavbar from "react-responsive-animate-navbar";
    import Logo from "../Assets/Media/ToolioLogoSmall.png"
     
    
    export default function Navbar({ setSignedIn }) {
      console.log(ReactNavbar.ReactNavbar) //Edited, fixed issue.
      return (
        <div style={style.background}>
          <ReactNavbar.ReactNavbar style={style.background}
            color="rgb(25, 25, 25)"
            logo={Logo}
            menu={[
              { name: "HOME", to: "/Explore" },
              { name: "ARTICLES", to: "/articles" },
              { name: "My Profile", to: "/profile" },
              { name: "CONTACT", to: "/contact" },
            ]}
            social={[
              {
                name: "Linkedin",
                url: "https://www.linkedin.com/",
                icon: ["fab", "linkedin-in"],
              },
              {
                name: "Facebook",
                url: "https://www.facebook.com/",
                icon: ["fab", "facebook-f"],
              },
              {
                name: "Instagram",
                url: "https://www.instagram.com/",
                icon: ["fab", "instagram"],
              },
              {
                name: "Twitter",
                url: "http://www.twitter.com/",
                icon: ["fab", "twitter"],
              },
            ]}
          />
                
          </div>
        );
      }

Answer 3

查看该包的源代码，它不包含默认导出。 它有：

export const ReactNavbar没有默认值的export const ReactNavbar 。

尝试导入命名组件而不是默认组件：

import { ReactNavbar } from而不是import ReactNavbar from