Components

<SuspenseList>

编辑此页面

SuspenseList 允许协调多个并行的 Suspense 和 SuspenseList 组件。它控制内容显示的顺序以减少布局抖动，并且有一个选项可以折叠或隐藏 fallback 状态。

import { SuspenseList } from "solid-js"
import type { JSX } from "solid-js"


function SuspenseList(props: {
  children: JSX.Element
  revealOrder: "forwards" | "backwards" | "together"
  tail?: "collapsed" | "hidden"
}): JSX.Element

注意：SuspenseList 仍处于实验阶段，尚未完全支持 SSR。

以下是如何使用 SuspenseList 的示例：

<SuspenseList revealOrder="forwards" tail="collapsed">
  <ProfileDetails user={resource.user} />
  <Suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </Suspense>
  <Suspense fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </Suspense>
</SuspenseList>

属性

名称类型默认值描述
revealOrder"forwards" | "backwards" | "together""forwards"决定 SuspenseList 子组件应该以何种顺序显示。
tail"collapsed" | "hidden"undefinedTODO

revealOrder

"forwards" | "backwards" | "together"

  • "forwards"：在前一个项目完成渲染后显示列表中的每个项目。这是默认值。
  • "backwards"：在下一个项目完成渲染后显示列表中的每个项目。
  • "together"：同时显示列表中的所有项目。

tail

"collapsed" | "hidden"

报告此页面问题