Перейти к содержанию

Switch and Match

{"<switch> and <match>"}

Useful for when there are more than 2 mutual exclusive conditions. It is a more flexible version of the if-else-if-else-if-else-... chain.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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>);

A super simple implementation of this component would be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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;
}

For example, it can be used to perform basic routing:

1
2
3
4
5
6
7
8
<Switch fallback={<div>Not Found</div>}>
  <Match when={state.route === "home"}>
    <Home />
  </Match>
  <Match when={state.route === "settings"}>
    <Settings />
  </Match>
</Switch>

Match also supports function children to serve as keyed flow.

Props

Switch

Name Type Default Description
fallback JSX.Element undefined The fallback element to render if no Match component has a truthy when prop.

Match

Name Type Default Description
when T \| undefined \| null \| false undefined The condition to check. If it is truthy, the children will be rendered.

Комментарии