<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" | undefined | TODO |
revealOrder
"forwards" | "backwards" | "together"
"forwards"
:在前一个项目完成渲染后显示列表中的每个项目。这是默认值。"backwards"
:在下一个项目完成渲染后显示列表中的每个项目。"together"
:同时显示列表中的所有项目。
tail
"collapsed" | "hidden"