reactjs - Storybook 是否支持异步导入？

Question

我的 Storybook 不能很好地扩展大量组件，所以我希望我可以用 Storybook 异步注册故事

我喜欢使用的语法是这样的

const storyRoot = storiesOf(`${CORE_COMPONENTS}/Charts`, module);

(async () => {
    const SomeComponent = await import('../SomeComponent.tsx');

    storyRoot.add('Area Chart', () => <SomeComponent data={data} />);
})();

但它会尝试渲染 Promise，因此您会遇到不变的违规，并且它会在有机会解决之前崩溃。

Answer 1

您可以使用 React Suspense API 延迟加载组件。但是，它仍然会在后台加载。我希望它只在我单击侧边栏中的链接时加载组件。如果有人有更好的解决方案，请发布!

import React, {lazy, Suspense} from 'react';
const SomeComponent = lazy(() => import('./some-component'));
import { storiesOf } from '@storybook/react';

storiesOf('SomeComponent', module)
    .add('story', () => (
        <Suspense fallback={<div>Loading...</div>}>
            <SomeComponent />
        </Suspense>
    ));