加载屏幕 ReactJS

Question

我正在加载以使用 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;

Answer 1

Return部分应该是这样的：

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

加载屏幕 ReactJS

Loading Screen ReactJS

screen

splash-screen

loading

reactjs

display