Question

这是我的情况的简化

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，并且将动态加载组件。同时，nextjs呈现加载消息。到目前为止，一切都很好

但是，我希望在加载variableComponent时看不见DynamicImportedComponent。这是因为它的某些样式在加载程序中看起来不太好。有没有一种方法可以检测组件是否已完成加载？加载组件后，我将照常渲染variableComponent

我在想类似

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

但是似乎不存在。

我正在使用最新版本的React和nextjs，以及打字稿

检测是否在Nextjs中加载了动态导入的组件

0 个答案: