如何将 react-spring 动画组件添加到 React 延迟加载？

Posted 2023-02-21

【中文标题】如何将 react-spring 动画组件添加到 React 延迟加载？

【英文标题】：How to add react-spring animation component to React lazy loading?

【发布时间】：2021-08-23 05:11:57

【问题描述】：

我尝试使用 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;

我怎样才能像向上加载动画一样做到这一点？

【参考方案1】：

您需要将 React 元素传递给 fallback，而不是组件。用< 和/> 包围Login_Register 以将该组件变成一个元素。像这样：

fallback= <Login_Register />