Reactコンポーネントの階層構造をreduceで作る

publication: 2023/10/01

update:2023/10/02

JSX中でmapはよく使われるのに、reduceは見かけない

ReactでJSXを作る際、配列に対してmapでコンポーネントを配置する記述は当たり前のように見かけますが、reduceの例が見当たらないので作ってみました。

mapがコンポーネントを平置きしていくのに対し、reduceを使うとツリー構造を作ることが出来ます。ちなみにreduceRightを使っているのは、配列の評価順を後方から行うためです。

import { ReactNode } from "react";

type Props = { value: string; children?: ReactNode };

const Test = ({ value, children }: Props) => (
  <>
    <div>{value}</div>
    <div style={{ margin: "16px" }}>{children}</div>
    <div>{value}</div>
  </>
);

const Page = () => {
  const values = ["ああああ", "いいいい", "うううう", "ええええ", "おおおお"];
  return (
    <>
      <div>[mapで並べる]</div>
      <div>
        {values.map((value) => (
          <Test key={value} value={value} />
        ))}
      </div>
      <hr />
      <div>[reduceで並べる]</div>
      <div>
        {values.reduceRight(
          (children, value) => (
            <Test value={value}>{children}</Test>
          ),
          <></>
        )}
      </div>
    </>
  );
};

export default Page;

{"width":"397px","height":"990px"}

ということで、簡単に階層構造ができました。

まとめ

技は盗むより、編み出したほうが早いです。