如何使用延迟语法导入命名导入?
在我们能够使用以下语法之前:
import { MainComponent, Component1, Component2 } from './components';
如何实现类似这样的效果(尽管这并不起作用)?:
const { MainComponent, Component1, Component2 } = React.lazy(() => import('./components'));
如何使用延迟语法导入命名导入?
在我们能够使用以下语法之前:
import { MainComponent, Component1, Component2 } from './components';
const { MainComponent, Component1, Component2 } = React.lazy(() => import('./components'));
目前,React.lazy
不支持命名导入:
此RFC的范围有限。它针对我们想要处理的主要用例(默认导入)进行了定位。未来的RFC可能会支持命名导入,但这超出了本RFC的范围。本RFC故意非常有限。我们预计在接下来的几个月内更好地了解这个问题,并且我们可以在更好地理解后重新讨论这个问题。 reactjs/rfcs#64 (comment)
React不支持命名导出
在这里,您可以找到如何创建中间模块的示例
这意味着每个导入都需要另一个文件。目前没有更好的语法,但我们希望将来会有。
// 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"));
您可以逐个导入它们 -
const ComponentName = React.lazy(() => import('./componentname'));
/**
* Improvement on top of React.lazy() that allows lazy rendering of named imports
* Usage:
*
* -- alternative to import { primary } from './Button'
* const PrimaryButton = CustomLazy(() => import('./Button'),'primary');
*
* -- get the default import
* CustomLazy(() => import('./Button'), 'default');
*
* -- or
* CustomLazy(() => import('./Button'));
*
*/
// eslint-disable-next-line no-restricted-imports
import { ComponentType, lazy } from 'react';
type CustomLazyProps = <T extends ComponentType<React.PropsWithChildren<any>>>(
thenable: () => Promise<{
[name: string]: T;
}>,
name?: string
) => React.LazyExoticComponent<T>;
const CustomLazy: CustomLazyProps = (resolver, name = 'default') => {
return lazy(async () => {
const resolved = await resolver();
return { default: resolved[name] };
});
};
export default CustomLazy;
虽然我没有尝试过,但是类似这样的代码应该可以工作:
const { MainComponent, Component1, Component2 } = React.lazy(() =>
import('./components')).then(module => ({
default: {
MainComponent: module.MainComponent,
Component1: module.Component1,
Component2: module.Component2,
}));