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

Question

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

这是我在尝试编译以下代码（下面的 sn-ps 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"],
          },
        ]}
      />
    );
  }
}

这是组件，因为我将它引入我的应用程序并稍微重构它以适应我一直使用的反应语法。

./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

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

export const ReactNavbar 没有默认值。

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

import { ReactNavbar } from 而不是import ReactNavbar from

Answer 3

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

   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>
        );
      }