Asai Toshiya
0%

投稿日

logo.svg

以下の For コンポーネントを、

1
2
3
4
5
6
7
<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>

以下の React のように記述するためのワンライナー。

1
2
3
4
5
6
7
{cats.map((cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
      {i + 1}: {cat.name}
    </a>
  </li>
)}
続きを読む »

投稿日

logo.svg

SolidJS で強制的にコンポーネントを再描画する方法。

Signal の値をキーとして使用して、キーを変更することにより、コンポーネントを再描画する。

ここでは、「再描画」ボタンをクリックしたときに、1 秒ごとにカウントをインクリメントする以下の CountingComponent コンポーネントを再描画する。

CountingComponent.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createSignal, onCleanup } from "solid-js";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  const interval = setInterval(
    () => setCount(c => c + 1),
    1000
  );
  onCleanup(() => clearInterval(interval));
  return <div>Count value is {count()}</div>;
};

export default CountingComponent;
続きを読む »

投稿日 編集日

ブログを作成するための静的サイト ジェネレーターの Hexo の個人メモ。

随時更新。

続きを読む »