持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

流程控制之show

jsx允许使用JavaScript来控制逻辑。solidjs将其封装为组件。Show组件内置when和fallback，前者负责逻辑运算，在不为true时控制显示fallback中的内容。

import { render } from 'solid-js/web';
import { createSignal, Show } from 'solid-js';
function App() {
  const [loggedIn, setLoggedIn] = createSignal(false);
  const toggle = () => setLoggedIn(!loggedIn())
  return (
    <Show
      when={loggedIn()}
      fallback={<button onClick={toggle}>Log in</button>}
    >
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}
render(() => <App />, document.getElementById('app'))

这段代码也比较简单。控制按钮控制不同的按钮显示。

For

如果你想遍历一个列表，毫无疑问For组件是非常适用的。在更新时不需要重新创建一个新的数据项dom节点，而是以更新或者移动去将旧的更换为新的。

import { render } from 'solid-js/web';
import { createSignal, For } from 'solid-js';

function App() {
  const [cats, setCats] = createSignal([
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	]);
  
  return (
    <ul>
      <For each={cats()}>{(cat, i) =>
        <li>
          <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
			      {i() + 1}: {cat.name}
		      </a>
        </li>
      }</For>
    </ul>
  );
}
render(() => <App />, document.getElementById('app'))

这段代码创建一个signal数据，并使用for组件进行循环。其中并没有key关键字，是因为solidjs以index 是一个 Signal，因此它可以在移动行时独立更新。数据项不是 Signal，因为更改将意味着新引用并会导致创建新行。

switch

有时需要处理 2 个以上互斥结条件。出于这个原因，我们根据 JavaScript 的 switch/case 之后大致建模出 <Switch> 和 <Match> 组件。它将尝试匹配每个条件，当第一个条件求值为真时停止渲染。如果所有这些都失败，它将渲染回退内容。我们可以用下面代码替换嵌套的 <Show> 组件：

import { render } from "solid-js/web";
import { createSignal, Switch, Match } from "solid-js";

function App() {
  const [x] = createSignal(7);

  return (
    <Switch fallback={<p>{x()} is between 5 and 10</p>}>
      <Match when={x() > 10} >
        <p>{x()} is greater than 10</p>
      </Match>
      <Match when={5 > x()}>
        <p>{x()} is less than 5</p>
      </Match>
    </Switch>
  );
}

render(() => <App />, document.getElementById("app"));

在这段代码中，创建一个signal数据，在match组件里面使用表达式判断是否符合，不符合则默认显示switch的fallback的内容。

SolidJs流程控制

流程控制之show

For

switch