如何解决加载屏幕 ReactJS
我正在加载以使用 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>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。