Блог

Я загружаюсь, чтобы реализовать загрузочный экран, используя анимацию из LottieFiles. Кажется, я получаю какую-то ошибку, возможно, синтаксическую ошибку, которую я не могу устранить. Был бы очень признателен за помощь.

 import "./App.scss"
import { useState, useEffect } from "react";
import Menu from "./components/Menu/menu" ; 
import Lottie from 'react-lottie';
import animationData from "./loading.json";


function App() {
  const [loading, setLoading]= useState(false);
  const [menuOpen, setMenuOpen]=useState(false);

  useEffect(() => {
      setLoading(true)
      setTimeout(()=>{
        setLoading(false)
      },5000)
  },[])

  const loadingscreen = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }};

  return (
    <div className="app">
      {loading ? (
      <Lottie options={loadingscreen} />
          ) : (
      <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
    }
    </div>   
  );
}

export default App;
 

Возвращаемая часть должна быть такой:

 return (
   <div className="app">
        {loading ?     
           <Lottie options={loadingscreen} />
           :
           <>
               <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
               <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
           </>
        }
   </div>   
);
 

А также вместо < > < > < / > вы можете использовать </>Фрагмент> также.

 return (
   <div className="app">
        {loading ?     
            <Lottie options={loadingscreen} />
            :
            <React.Fragment>
                <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
                <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
            </React.Fragment>
         }
   </div>   
);