我在將找到的現有 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