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

publication: 2023/10/01

update:2024/02/20

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

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

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

1import { ReactNode } from "react";
2
3type Props = { value: string; children?: ReactNode };
4
5const Test = ({ value, children }: Props) => (
6  <>
7    <div>{value}</div>
8    <div style={{ margin: "16px" }}>{children}</div>
9    <div>{value}</div>
10  </>
11);
12
13const Page = () => {
14  const values = ["ああああ", "いいいい", "うううう", "ええええ", "おおおお"];
15  return (
16    <>
17      <div>[mapで並べる]</div>
18      <div>
19        {values.map((value) => (
20          <Test key={value} value={value} />
21        ))}
22      </div>
23      <hr />
24      <div>[reduceで並べる]</div>
25      <div>
26        {values.reduceRight(
27          (children, value) => (
28            <Test value={value}>{children}</Test>
29          ),
30          <></>
31        )}
32      </div>
33    </>
34  );
35};
36
37export default Page;

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

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

まとめ

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