0

我尝试使用 React 延迟和 Suspense 加载。我有用于延迟加载的简单登录页面和动画页面。但是，如果我刷新或打开此页面，我将看不到动画。但是当fallback = <p> Loading... </p> 这样写它是工作。如何用动画做到这一点？
这是我延迟加载的主页：

import { lazy, Suspense } from "react";
import Login_Register from "../Loadingsss/login-register";

const Example = lazy(()=>import ('./Login'));

function Login(){

    return (
        <Suspense fallback={ Login_Register }>
            <Example />
        </Suspense>
    );

}

export default Login;

这个动画页面：

import { useState } from 'react';
import {animated, useSpring} from 'react-spring';

function Login_Register(){

    const [toogle, setToggle] = useState(true);

    const props = useSpring({
        width: toogle===true ?'22rem':'0rem',
        backgroundColor: toogle ? '#ccc' : 'rgb(175, 175, 175)',
        height: '100%',
        borderRadius: '10px'
    });

    setInterval( ()=>{
        setToggle(!toogle);
    },1000 );
    
    return (<div className="loading">
        <div className="row">
            <animated.div style = {props.backgroundColor} className="circle"></animated.div>
            <animated.div style={props} className="rectangle"></animated.div>
        </div>
        <div className="row">
            <animated.div style = {props.backgroundColor} className="circle"></animated.div>
            <animated.div style={props} className="rectangle"></animated.div>
        </div>
        <div className="row">
            <animated.div style = {props.backgroundColor} className="circle"></animated.div>
            <animated.div style={props} className="rectangle"></animated.div>
        </div>
        <div className="row">
            <animated.div style = {props.backgroundColor} className="circle"></animated.div>
            <animated.div style={props} className="rectangle"></animated.div>
        </div>
        <div className="row">
            <animated.div style = {props.backgroundColor} className="circle"></animated.div>
            <animated.div style={props} className="rectangle"></animated.div>
        </div>
        
        
    </div>);
}

export default Login_Register;

我怎么能像上工作负载动画一样做到这一点？

4

1 回答 1

0

您需要将 React Element 传递给fallback，而不是 Component。环绕Login_Register并<把/>那个组件变成一个元素。像这样：

fallback={ <Login_Register /> }

于 2021-08-19T18:32:29.400 回答