你能解构延迟加载的 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"));

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

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Answer 1

你不能用 React.lazy :

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. (cf. https://reactjs.org/docs/code-splitting.html#reactlazy)

存在一个解决方法：创建一个中间模块来导入您指定的导出并将其导出为默认值（参见 https://reactjs.org/docs/code-splitting.html#named-exports）

Answer 2

我想要另一个解决方法。该组件链接承诺并将命名的导出添加到默认导出。 src. Although, I'm not sure if this breaks tree shaking. There's a bit of an explanation here.

import {lazy} from 'react'
export default (resolver, name = 'default') => {
  return lazy(async () => {
    const resolved = await resolver()
    return {default: resolved[name]}
  })
}

Answer 3

React.lazy 目前只支持默认导出。如果您要导入的模块使用命名导出，您可以创建一个中间模块，将其重新导出为默认模块。这确保了 tree shaking 继续工作，并且你不会引入未使用的组件。

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

更多信息： https://reactjs.org/docs/code-splitting.html#named-exports

Answer 4

如果你使用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")
);

有关更多选项，请参阅。

Answer 5

以下是我在使用 FontAwesome 时遇到这个问题时的做法：

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

Answer 6

当然可以。这是很多人犯过的无心之失，

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>

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

Can you deconstruct lazily loaded React components?

reactjs

es6-module-loader

react-suspense