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

Posted 2023-02-21

【中文标题】你能解构延迟加载的 React 组件吗？

【英文标题】：Can you deconstruct lazily loaded React components?

【发布时间】：2020-03-06 13:35:51

【问题描述】：

使用 es6 导入，您可以这样做：

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

export default function () 
  return <MyComponent/>;

我也可以用React.lazy 来做吗？

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

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

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

【参考方案1】：

当我面对 FontAwesome 的问题时，我是这样做的：

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

【参考方案2】：

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

更多选项请参见this answer。

【参考方案3】：

你不能用 React.lazy ：

React.lazy 接受一个必须调用动态 import() 的函数。这必须返回一个 Promise，它解析为具有包含 React 组件的默认导出的模块。 （参见https://reactjs.org/docs/code-splitting.html#reactlazy）

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

【参考方案4】：

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

【参考方案5】：

我想要另一种解决方法。这个能力链承诺并将命名导出添加到默认导出。 src。虽然，我不确定这是否会破坏摇树。有一点explanation here。

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