你能解构延迟加载的 React 组件吗？

Question

使用 es6 导入，您可以执行以下操作：

import { MyComponent } from "../path/to/components.js";

export default function () {
  return <MyComponent/>;
}

我也可以这样做React.lazy吗？

const { MyComponent } = lazy(() => import("../path/to/components.js"));

我收到以下错误，但我不确定它是否与此错误或我遇到的其他错误有关：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Answer 1

当我遇到 FontAwesome 的问题时，我是这样做的：

const FontAwesomeIcon = React.lazy(()=> import('@fortawesome/react-fontawesome').then(module=>({default:module.FontAwesomeIcon})))

Answer 2

当然可以。这是很多人都犯过的无心错误

const sub = 'a'
const obj = { a: 'alpha', b: 'beta' }

obj.sub // wrong (accessing a direct key)
obj[sub] // right (computed property)

许多人都犯了同样的错误。这是一项正在进行的工作，但效果非常好，感谢所有其他答案来根据我的需要定制它。

const ComponentFactory = ({ componentName, ...props }) => {
  const Component = lazy(() => import('baseui/typography').then((module) => ({ default: module[componentName] })))

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Component {...props} />
    </Suspense>
  )
}

用法：

    <ComponentFactory
      componentName='Paragraph1'
      margin='0.1rem 0rem 0.25rem 0.3rem'
      color={style[of].headingText}
    >
      {headingMessage}
    </ComponentFactory>

Answer 3

如果您使用react-lazily ，则可以。

import { lazily } from 'react-lazily';
const { MyComponent } = lazily(() => import("../path/to/components.js"));

它还允许导入多个组件：

const { MyComponent, MyOtherComponent, SomeOtherComponent } = lazily(
  () => import("../path/to/components.js")
);

有关更多选项，请参阅此答案。