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>
    ));

故事书是否支持异步导入？

1 个答案: