details 요소로 디렉터리 보이기

고맙습니다.
디렉터리 트리가 표시되어 있기 때문에 당시에 사용했던 tips를 정리합니다.

데이터 요소

HTML5에는 details 요소가 있다.

<details>
    <summary>detailsのtitle</summary>
</details>

GiitHub의 MarkDown에서도 사용할 수 있다.
이것details 요소이지만 마음대로 접어서 표시할 수 있다.
편하네.

이루어지다

각 React에 설치해 보세요.

type Dir = { [key: string]: Dir | File };
type File = string;

const isDir = (entity: Dir | File): entity is Dir =>
  !(entity instanceof Array) && typeof entity === 'object';

const DirView = ({ dir }: { dir: Dir; }) => (
  <>
    {Object.entries(dir).map(([name, entity]) =>
      isDir(entity) ? (
        <details key={name}>
          <summary>{name}</summary>
          <DirView dir={entity} />
        </details>
      ) : (
        <div key={name}>{name}</div>
      )
    )}
  </>
);

중점은 구성 요소를 귀속적으로 사용하는 것이다.
(데이터 구조로 트리를 그렸으니 당연한 일이다...)
이때는 계층 구조이기 때문에'디렉토리 아래 디렉토리에 있는 파일'도 표시할 수 있지만 모두 갖추어져 있어 잘 보이지 않는다.
따라서 다음 CSS를 작성하십시오.

details > details,
details > div {
  padding-left: 16px;
}

패딩만 붙여줄게.
요점은 details자요소details요소div요소 중의 스타일이다.
이렇게 하면 끼워 넣은 details 요소 중 끼워 넣은 부분에padding이 있다.

총결산

↑ 그리고 실제 행동을 볼 수 있다.
갑자기 이루어지면 의외로 할 수 있으니까 귀결을 해봐.
파일 트리나 트리 구조를 그릴 때 사용하십시오.