Components

<Show>

Show 控制流用于条件渲染视图的一部分：当 when 为真时渲染子元素，否则渲染 fallback。它类似于三元运算符 (when ? children : fallback)，但更适合用于 JSX 模板。

import { Show } from "solid-js"
import type { JSX } from "solid-js"

function Show<T>(props: {
  when: T | undefined | null | false
  keyed?: boolean
  fallback?: JSX.Element
  children: JSX.Element | ((item: T | Accessor<T>) => JSX.Element)
}): () => JSX.Element

以下是使用 Show 控制流的示例：

<Show when={state.count > 0} fallback={<div>加载中...</div>}>
  <div>我的内容</div>
</Show>

Show 也可以用作将块与特定数据模型关联的方式。例如，当用户模型被替换时，函数会重新执行。

<Show when={state.user} fallback={<div>加载中...</div>} keyed>
  {(user) => <div>{user.firstName}</div>}
</Show>

如果不使用 keyed 属性，子函数的参数将是一个包含该项的访问器。

<Show when={state.user} fallback={<div>加载中...</div>}>
  {(user) => <div>{user().firstName}</div>}
</Show>

属性

名称	类型	描述
`when`	`T \| undefined \| null \| false`	用于测试真值的值
`keyed`	`boolean`	是否将块与 when 的值关联
`fallback`	`JSX.Element`	当 when 为假时要渲染的后备内容

报告此页面问题