Components

<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元素的回调。

报告此页面问题