从“react-loader-spinner”导入 Loader 时出现错误？

Question

我收到的错误：

ERROR in ./src/components/Loading.jsx 9:33-39

export 'default' (imported as 'Loader') was not found in 'react-loader-spinner' (possible exports: Audio, BallTriangle, Bars, Circles, CradleLoader, Grid, Hearts, MutatingDots, Oval, Plane, Puff, RevolvingDot, Rings, TailSpin, ThreeDots, Triangle, Watch)

这是我的代码：

import React from 'react';
import Loader from 'react-loader-spinner';

export const Loading = () => (
  <div className="flex justify-center items-center ">
    <Loader type="Puff" color="#00BFFF" height={550} width={80} />
  </div>
);

Answer 1

react-loader-spinner导出各种加载器，您可以直接使用这些加载器。如果您想导入所有加载程序并使用它们。你可以这样做。

import * as Loader from "react-loader-spinner";

function App() {
  return <Loader.TailSpin />;
}

或者

import {TailSpin} from "react-loader-spinner";

function App() {
  return <TailSpin />;
}

https://codesandbox.io/s/hopeful-herschel-652kq?file=/src/index.js:70-168

Answer 2

您只需要导入您想要的特定加载程序，因为有很多加载程序可以react-loader-spinner导出。例如，下面的代码适用于Rings加载程序。

所有加载器类型都在官方文档中。

import { Rings } from 'react-loader-spinner';

export const Loading = () => (
  <div className="flex justify-center items-center ">
    <Rings color="#00BFFF" height={80} width={80} />
  </div>
);