reactjs - 加载屏幕 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>
);
你也可以使用 <React.Fragment> 来代替 <> </>。
return (
<div className="app">
{loading ?
<Lottie options={loadingscreen} />
:
<React.Fragment>
<Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
<Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
</React.Fragment>
}
</div>
);
推荐阅读
- mariadb - 仅 Python mysql.connector 替换为 mariaDB 的兼容 api
- tfs - TFS API中参数的长度限制?
- openshift - Openshift new-app 不适用于 dockerfile
- mysql - 将mysql选择非聚合转换为mssql
- amazon-web-services - 源域名为 S3 存储桶时的 CloudFront InvalidArgument
- excel - 使用 selenium 在弹出窗口中向下滚动
- javascript - 如何在 jQuery DataTable 中将列数据作为超链接
- groovy - Jenkinsfile管道将工件存储到jfrog工件,文件名中带有sha校验和
- javascript - 为什么我的代码不能在 javascript 中异步运行?
- embedded - 如何在 atmel studio 7 上将免费 RTOS 移植到 Atmega128?