Control Flow

条件渲染

条件渲染是指根据条件显示不同 UI 元素的过程。这是 UI 开发中的常见模式，通常用于根据用户输入、数据或其他条件显示或隐藏元素。

Solid 提供了专用的组件以更直接和可读的方式处理条件渲染。

Show

当条件评估为真时，<Show> 渲染其子级。与 JavaScript 中的三元运算符类似，它使用 JSX 中的控制逻辑流来确定要渲染的内容。

<Show> 有一个 when 属性，用于确定是否渲染其子级。当它所依赖的状态或属性发生变化时，该属性将被重新评估。该属性可以是布尔值，也可以是返回布尔值的函数。

import { Show } from "solid-js";

<Show when={data.loading}>
  <div>Loading...</div>
</Show>;

<Show> 有一个 fallback 属性，用于指定条件评估为 false 时要渲染的内容。该属性可以返回一个 JSX 元素。

import { Show } from "solid-js";

<Show when={!data.loading} fallback={<div>Loading...</div>}>
  <h1>Hi, I am {data().name}.</h1>
</Show>;

如果需要处理多个条件，可以嵌套 <Show> 来处理每个条件。

import { Show } from "solid-js";

<Show when={data.loading}>
  <div>Loading...</div>
  <Show when={data.error}>
    <div>Error: {data.error}</div>
  </Show>
</Show>;

Switch and Match

当需要处理多个条件时，使用嵌套的 <Show> 组件来管理逻辑流可能会很困难。为此，Solid 提供了 <Switch> 和 <Match> 组件。

与 JavaScript 的 switch/case 结构类似，<Switch> 包装了多个 <Match> 组件，以便按顺序评估每个条件。第一个值为 true 的 <Match> 组件将渲染其子组件，其余组件将被忽略。

import { Switch, Match } from "solid-js";

<Switch>
  <Match when={condition1}>
    <p>Outcome 1</p>
  </Match>
  <Match when={condition2}>
    <p>Outcome 2</p>
  </Match>
</Switch>;

与 <Show> 类似，每个 <Match> 组件都有一个 when 属性，用于确定是否渲染其子组件。还可以将可选的 fallback 属性传递给 <Switch>，以指定当没有 <Match> 组件的计算结果为 true 时渲染的内容。

import { Switch, Match } from "solid-js";

<Switch fallback={<p>Fallback content</p>}>
  <Match when={condition1}>
    <p>Outcome 1</p>
  </Match>
  <Match when={condition2}>
    <p>Outcome 2</p>
  </Match>
</Switch>;

报告此页面问题