2

所以这里是主要思想，HOC 能够使用 React.lazy 和 React.Suspense 加载任何包装在组件中的组件。可能吗？？？所以，我已经能够写一些，但不确定我是否能够正确地制作......

import React, { Suspense, lazy, useState, useEffect } from "react"

export function withLazyImport(LazyComponent) {
  return (props) => {
    const [loadedComponent, setLoadedComponent] = useState(null)

    useEffect(() => {
      setLoadedComponent(lazy(() => import(<LazyComponent {...props} />)))
      //eslint-disable-next-line
    }, [])

    return (
      <Suspense fallback="Lazy component is loading ...">
        {loadedComponent}
      </Suspense>
    )
  }
}
4

2 回答 2

2

我不明白你为什么使用useEffect. 结果组件不会将新的 props 传递给惰性组件，因为 props 是在传递的did mount。

我根据这个问题的作者提供的例子想出了另一个解决方案

import React, { Suspense } from 'react';

export const withLazyComponent = (LazyComponent) => {
  return (props) => (
    <Suspense fallback="Lazy component is loading ...">
      <LazyComponent {...props} />
    </Suspense>
  )
}

然后你像这样使用它：

const LazyComponent = withLazyComponent(React.lazy(() => import('path/to/component')));
于 2020-12-29T15:57:01.810 回答
0

您可以尝试使用现有的解决方案，例如可加载组件

于 2020-07-15T13:14:52.303 回答