10

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

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

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

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

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

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

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

4

5 回答 5

14

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

const FontAwesomeIcon = React.lazy(()=> import('@fortawesome/react-fontawesome').then(module=>({default:module.FontAwesomeIcon})))
于 2021-02-20T07:34:12.733 回答
8

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

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

于 2021-01-08T02:53:57.210 回答
2

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

于 2020-11-10T13:21:23.273 回答
2

你不能用 React.lazy ：

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

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

于 2019-11-10T18:26:49.957 回答
1

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

import {lazy} from 'react'
export default (resolver, name = 'default') => {
  return lazy(async () => {
    const resolved = await resolver()
    return {default: resolved[name]}
  })
}
于 2020-05-18T22:06:06.830 回答