<Switch> / <Match>
编辑此页面当有超过2个互斥条件时非常有用。这是 if-else-if-else-if-else-... 链的一个更灵活的版本。
import { Switch, Match } from "solid-js"import type { MatchProps, JSX } from "solid-js"
function Switch(props: { fallback?: JSX.Element children: JSX.Element}): () => JSX.Element
type MatchProps<T> = { when: T | undefined | null | false children: JSX.Element | ((item: T) => JSX.Element)}function Match<T>(props: MatchProps<T>)
这个组件的一个超级简单实现可能是:
function Switch(props) { let children = props.children
if (!Array.isArray(children)) children = [children]
for (let i = 0; i < children.length; i++) { const child = children[i] if (child.props.when) return child }
return props.fallback}
例如,它可以用于执行基本路由:
<Switch fallback={<div>未找到</div>}> <Match when={state.route === "home"}> <Home /> </Match> <Match when={state.route === "settings"}> <Settings /> </Match></Switch>
Match 还支持函数子组件以作为键控流。
属性
Switch
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
fallback | JSX.Element | undefined | 当没有 Match 组件的 when 属性为真时渲染的后备元素。 |
Match
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
when | T | undefined | null | false | undefined | 要检查的条件。如果为真,将渲染 children 。 |