Javascript 我在将我发现的现有react组件集成到我的应用程序中时遇到问题&引用；尝试导入错误："；

我的目标是将我在web上找到的现有react组件（如下）带到我的应用程序中使用。它是一个动画导航栏

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

我安装的库可能有问题？创造者7个月前在这里制作了这个组件

不管怎样，请参见下面关于1的详细信息。我试图引入的组件，2。我的代码中的组件，经过了轻微的重构和3。我要将此组件导入的文件

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

npm安装--保存动画导航栏
从“React”导入React；
从“反应响应动画导航栏”导入反应导航栏；
类示例扩展组件{
render（）{
返回(
);
}
}

这是我把它带到我的应用程序中并对它进行了轻微的重构以适应我一直使用的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"],
          },
        ]}
      />
    );
  }

从“React”导入React；
从“反应响应动画导航栏”导入反应导航栏；
导出默认函数Navbar（{setSignedIn}）{
返回(
);
}

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

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

从“React”导入React；
从“./components/Navbar”导入导航栏；
从“./组件/类别”导入类别；
导出默认函数ChooseACategory（{setSignedIn}）{
返回(
);
}

---

我怀疑问题在于我从“class…extends component”语法到“export default function name”语法（我比较熟悉）的重构。我知道这两者之间没有太大的区别，但我更愿意保持这个项目的代码统一。欢迎任何帮助

重构没有问题，因为没有使用任何状态。我安装了那个软件包，没有任何更改。当我开始的时候，出现了和你一样的错误信息。我怀疑这个包本身无法运行。

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

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

从“React”导入React；
从“react responsive animate navbar”导入*作为react navbar；
从“./Assets/Media/tooliologsall.png”导入徽标
导出默认函数Navbar（{setSignedIn}）{
console.log（ReactNavbar.ReactNavbar）//已编辑，已修复问题。
返回(
);
}

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

export const ReactNavbar

不带默认值

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

---

import{ReactNavbar}from

而不是

import ReactNavbar from

请将代码显示为文本，或者将代码显示为图像。搜索引擎，更重要的是，有视觉障碍的人，将无法利用你答案中的信息，因为它在图像中。

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

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