ReactのJSX内でforの代わりにループを行うコンポーネント

React のループ処理

React の JSX 内でループを行うには、あらかじめ配列を用意しておくのが一般的です。しかしイチイチ配列を用意せずとも、さっと for 文のような書き方が出来たらと考えた人は多いのではないでしょうか？今回は JSX 内で for 文のような書き方が出来るコンポーネントを作ってみたいと思います。

For コンポーネント

const For = <T,>({
  v,
  children,
}: {
  v: [T, (v: T) => unknown, (v: T) => T];
  children: (v: T, index: number) => ReactNode;
}) => {
  let index = 0;
  const value: ReactNode[] = [];
  for (let i = v[0]; v[1](i); i = v[2](i)) {
    value.push(children(i, index++));
  }
  return <>{value}</>;
};

使い方

一般的な for 文と書き方は同じです。
v に入れる値として[初期値,継続条件,変化式]を入れます。

const ForTest = () => {
  return (
    <For v={[5, (i) => i < 10, (i) => i + 1]}>
      {(i, index) => (
        <button key={i}>
          {index}番目は{i}
        </button>
      )}
    </For>
  );
};

初期値が 5 になっているので 5 ～ 9 までのループが行われます。あとは children にループ時の処理を書けば完成です。for でカウントしている値と、ループ回数の両方が取得可能なので、必要に応じて使い分けてください。

実行結果

• 画像

• CodePen