<Index>
编辑此页面非键控列表迭代(渲染的节点是通过数组索引进行键控的)。当没有概念性的键时这很有用,比如数据由原始类型组成,并且固定的是索引而不是值。
import { Index } from "solid-js"import type { JSX } from "solid-js"
function Index<T, U extends JSX.Element>(props: { each: readonly T[]; fallback?: JSX.Element; children: (item: () => T, index: number) => U;}): () => U[];
这个组件的一个超级简单实现可能看起来像这样:
function Index<T, U extends JSX.Element>(props: { each: readonly T[]; fallback?: JSX.Element; children: (item: () => T, index: number) => U;}) { return () => { const [items, setItems] = createSignal(props.each); return props.each.map((_, i) => props.children(() => items()[i], i)); };}
以下是在 Solid 中 Index
组件的实现示例:
<Index each={state.list} fallback={<div>Loading...</div>}> {(item) => <div>{item()}</div>}</Index>
注意,与 For
组件不同,这里的 item 是一个信号。这是因为 Index
组件不是键控到项目本身,而是键控到索引。
可选的第二个参数是索引号:
<Index each={state.list} fallback={<div>Loading...</div>}> {(item, index) => ( <div> #{index} {item()} </div> )}</Index>
属性
名称 | 类型 | 描述 |
---|---|---|
each | readonly T[] | 要迭代的数组 |
fallback | JSX.Element | 数组加载时要渲染的可选回退元素 |
children | (item: () => T, index: number) => U | 渲染子元素的函数 |