0

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

基本代码：

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

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

4

1 回答 1

0

我有一个类似的问题，我通过创建一个<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>您的组件周围有两个。

于 2021-06-17T12:41:37.363 回答