reactjs NextJS 13为每个组件加载组件

lkaoscv7 于 2023-01-08 发布在 React

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

我试图通过构建一个监视列表来学习nextjs，目前，我正在创建一个保存价格的item组件，我试图完成的是显示所有价格，但如果调用需要一段时间，我希望该组件呈现加载组件。例如

{/* @ts-expect-error Server Component */}
   <PriceFetch sleepTime="100"></PriceFetch> 
   {/* @ts-expect-error Server Component */} 
   <PriceFetch sleepTime="1000"></PriceFetch>
   {/* @ts-expect-error Server Component */} 
<PriceFetch sleepTime="10000"></PriceFetch>

我想发生的是第一个组件加载，而其他两个仍然显示加载第二个两个加载了。睡眠时间是一个承诺，睡眠的时间。我已经附上了我的应用程序目录看起来像什么图片。
我已经尝试过使用状态，但我希望避免这样做，以便使组件成为服务器端组件

reactjs

来源：https://stackoverflow.com/questions/75045372/nextjs-13-loading-component-for-every-component

1条答案

按热度按时间

pod7payv1#

我意识到我可以通过 Package 我自己的悬念来做到这一点，哈哈

<Suspense fallback={<h1>Loading profile...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="10"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading 2...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="100"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading profile3...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="1000"></PriceFetch>
    </Suspense>

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs NextJS 13为每个组件加载组件

1条答案

相关问题

热门标签

最新问答