<For>
编辑此页面<For>
组件用于渲染项目列表。它类似于 JavaScript 中的 .map()
函数。
import { For } from "solid-js"import type { JSX } from "solid-js"
function For<T, U extends JSX.Element>(props: { each: readonly T[] fallback?: JSX.Element children: (item: T, index: () => number) => U}): () => U[]
一个引用键控的循环,能高效地只更新已更改的项目。回调函数将当前项作为第一个参数:
<For each={state.list} fallback={<div>Loading...</div>}> {(item) => <div>{item}</div>}</For>
each
属性也可以是一个返回列表的函数。这对于创建依赖于状态值的循环很有用:
<For each={stateSignal()}>{(item) => <div>{item}</div>}</For>
可选的第二个参数是索引信号:
<For each={state.list} fallback={<div>Loading...</div>}> {(item, index) => ( <div> #{index()} {item} </div> )}</For>
属性
名称 | 类型 | 描述 |
---|---|---|
each | readonly T[] | 要渲染的项目列表。 |
fallback | JSX.Element | 列表加载时要渲染的后备元素。 |
children | (item: T, index: () => number) => U | 为列表中的每个项目返回JSX元素的回调。 |