rw-jsx-control

1function App() {
2    const listRef = ref([1, 2, 3, 4]);
3    const countRef = ref(0);
4    setInterval(() => {
5        listRef.value.unshift(listRef.value.length + 1);
6        countRef.value++;
7    }, 1000);
8    return () => (
9        <>
10            <h1>Rw App Control</h1>
11            <For each={listRef.value}>
12                {/** main */}
13                {(item) => <li key={item}>{item}</li>}
14                {/** fallback */}
15                <p>fallback</p>
16            </For>
17
18            {/** Show */}
19            <Show when={countRef.value % 2 === 0} fallback={() => <h3>false fallback</h3>}>
20                {() => <h2>true Content fn h2</h2>}
21                <h2>true Content h2</h2>
22                <p>true Content p</p>
23            </Show>
24
25            {/** Switch */}
26            <Switch fallback={<h3>false fallback</h3>}>
27                <Match when={countRef.value > 0 && countRef.value < 5}>
28                    <h2>Match Content 1</h2>
29                    <h2>Match Content h2</h2>
30                    {() => <h2>Match Content fn h2</h2>}
31                </Match>
32                <Match when={countRef.value > 5 && countRef.value < 10}>
33                    <h2>Match Content 2</h2>
34                </Match>
35                <Match when={countRef.value > 10 && countRef.value < 15}>
36                    <h2>Match Content 3</h2>
37                </Match>
38            </Switch>
39        </>
40    );
41}