Components

<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`	渲染子元素的函数

报告此页面问题