如何使用 React Suspense 应用平滑过渡？答案

【问题标题】：How to apply a smooth transition with React Suspense?如何使用 React Suspense 应用平滑过渡？
【发布时间】：2021-05-16 06:44:43
【问题描述】：

我延迟加载一个带有延迟和悬念的组件。它有效，但过渡非常原始。有没有一种简单的方法来应用平滑过渡而不用关键帧不透明动画包装每个暂停的组件（在每次重新渲染时它会再次触发，我不想要这个。只有在组件准备好显示时才进行过渡） ?

基本代码：

const Foo = lazy(()=> import("./Foo"))

function Component (){
  return (
    <Suspense fallback={<Loader/>}>
     <Foo/>
    </Suspense>
  )
}

【问题讨论】：

标签： reactjs react-suspense

【解决方案1】：

我遇到了类似的问题，我通过创建 <Lazy ... /> 组件解决了这个问题。这是我的解决方案，也许它可以帮助你。

import React from "react"
import PleaseWait from "../please-wait"

export default function Lazy<P>(
    props: P & {
        factory: () => Promise<{ default: (props: P) => JSX.Element }>
    }
) {
    const { factory } = props
    const [element, setElement] = React.useState<JSX.Element | null>(null)
    React.useEffect(() => {
        setElement(null)
        factory().then(mod => setElement(mod.default(props)))
    }, [factory])
    return <PleaseWait>{element}</PleaseWait>
}

这是我的使用方法：

<Lazy
    factory={() => import("./menu")}
    traceMsg={props.myMessage}
/>

我在"./menu" 中定义的组件需要traceMsg 有prop。一旦你写了factory={() => import("./menu")}，TypeScript 就足够聪明，可以让 VSCode 为你提供traceMsg 的智能感知。

至于组件<PleaseWait/>，看你的需求。就我而言，我有这个：

export interface PleaseWaitViewProps {
    className?: string
    children?: JSX.Element | JSX.Element[] | string | null
}

export default function PleaseWaitView(props: PleaseWaitViewProps) {
    const { children } = props
    return (
        <div className={getClassNames(props)}>
            <div className={`element ${children ? "show" : "hide"}`}>
                {children}
            </div>
            <div className={`fallback ${children ? "hide" : "show"}`}>
                {/* Whatever spinning animation you want... */}
            </div>
        </div>
    )
}

当然，这不是一个完美的解决方案，因为您的组件周围有两个 <div>。

【讨论】：