检测动态导入的组件是否已加载到Nextjs中

q43xntqr 于 12个月前发布在其他

关注(0)|答案(1)|浏览(92)

这是对我的场景的简化

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

const DynamicImportedComponent = dynamic(() => import('Foo/baz'), {
  ssr: false,
  loading: () => <p>loading..</p>
});

const MyComponent: React.FC = () => {
  const [show, setShow] = useState(false)

  const variableComponent = <SomeStyledComponent styled={show}>value of show is {show.toString()}</SomeStyledComponent>
  return (
    <>
    {variableComponent}
    { show && <DynamicImportedComponent />}
    <button onClick={() => setShow(!show)}>toggle</button>
    </>
  )
}

字符串
有一个切换状态，允许我显示或不显示一个组件是动态加载的
我有一个总是呈现的组件，但基于切换可能会显示不同的样式。
当用户单击按钮时，状态设置为true，组件被动态加载。
但是，我希望DynamicImportedComponent在加载时不可见。这是因为它有一些样式在加载器中看起来不太好。是否有一种方法可以检测组件是否已完成加载？一旦组件加载，我将像往常一样呈现variableComponent
我在想沿着

{(DynamicImportedComponent.loaded || !DynamicImportedComponent.isLoading) && variableComponent}

型
但这似乎并不存在。
我正在使用最新版本的React和nextjs，以及typescript

next.js

来源：https://stackoverflow.com/questions/60301416/detect-if-dynamically-imported-component-has-loaded-in-nextjs

1条答案

按热度按时间

ttygqcqt1#

我也遇到了这个问题。目前还没有一个标准的方法来做到这一点，但一个Nextjs维护者在Nextjs repo的讨论中建议如下：
我们尽可能地镜像React.lazy（同时也提供缺失的加载状态，因为挂起在服务器端不起作用）。Suspense可能会解决你的问题，因为它允许在一个项目挂起时为树的一部分显示一个微调器（例如动态组件）。然而，正如所说的Suspense目前在服务器端不可用。
您可以做的一件事是在上下文值中传递state，并在加载组件中传递setState
我发现使用React Context的建议效果很好。

来自我的项目的示例代码

const ToolbarTray: FunctionComponent<{}> = () => {
  const { isDialogOpen, closeDialog, openDialog } = useDialogState();

  const [ isDialogLoading, setDialogLoadingStatus ] = useState(false);

  return (
    <DynamicLoadingContext.Provider value={setDialogLoadingStatus}>
      <Button onClick={openDialog}>
        {isDialogLoading ? <CircularProgress /> : <EditIcon />}
      </Fab>

      {isDialogOpen && <EditPersonDialog onClose={closeDialog} />}
    </DynamicLoadingContext.Provider>
  );
};

const EditPersonDialog = dynamic(() => import('~/dialogs/edit-person-dialog'), {
  ssr: false,
  loading: () => {
    const setLoading = useContext(DynamicLoadingContext);

    useEffect(() => {
      setLoading(true);
      return () => setLoading(false);
    }, [setLoading]);

    return null;
  },
});

字符串

赞(0）回复(0）举报 12个月前

我来回答

检测动态导入的组件是否已加载到Nextjs中

1条答案

来自我的项目的示例代码

相关问题

热门标签

最新问答