[React]コンポーネントの再帰処理でディレクトリ構造を表示する

コンポーネントの再帰処理をやってみた。

サンプルはこちら

ディレクトリ構造を表すようなイメージで作成してみたけど、サイドバーとかドロップダウンメニューとか、いろいろと使えそう。

import React, { FC, Children } from 'react';

// ディレクトリ構造としてのサンプルデータ
const fileNames = [
  { name: 'file A' },
  { name: 'file B' },
  {
    name: 'file C',
    items: [
      { name: 'file C-1' },
      { name: 'file C-2' }
    ],
  },
  { name: 'file D' },
  {
    name: 'file E',
    items: [
      { name: 'file E-1' },
      { name: 'file E-2' },
      { name: 'file E-3' },
      {
        name: 'file E-4',
        items: [
          { name: 'file E-4-1' },
          { name: 'file E-4-2' }
        ],
      },
    ],
  },
];

// items で files を受ける。 depth は階層を表す。
const RecursionComponent: FC<{ items: any; depth: number }> = ({
  items,
  depth,
}) => {
  return (
    <>
      {Children.toArray(
        items.map((item: any) => (
          <>
            <div style={{ marginLeft: depth * 20 }}>
              - {item.name}
            </div>
            {item.items && (
              <RecursionComponent items={item.items} depth={depth + 1} />
            )}
          </>
        )),
      )}
    </>
  );
};

const Recursion: FC = () => (<RecursionComponent items={fileNames} depth={0} />);

export default Recursion;