recursive component

15218 ワード
テキストリンク

recursive components


プロジェクト進行中は、カテゴリを直接作成するために再帰を使用せざるを得ない.
ただし、カテゴリデータは固定ではなく可変なので、フォルダをクリックするとデータが受信されます.
フォルダではなくファイルの場合、ファイル内のデータが受信されます.
1)フォルダの場合は、フォルダをUIで表示する必要があります
2)フォルダをクリックした場合(事前にフォルダのすべてのサブデータをインポートするのではなく)、サブデータを要求して取得する必要があります.
3)ファイルの前にフォルダを表示する必要があります
4)サブアイテムはUI形式でファイルとして表示する必要がある

コード#コード#


function sortIsDir(data: Data[]): Data[] | [] {
  let result = [
    ...data.filter((el) => el.is_dir),
    ...data.filter((el) => !el.is_dir),
  ];
  return result as Data[] | [];
}

function ParentNode({ title }: { title: string }) {
  const [isOpen, setIsOpen] = React.useState(false);
  const [data, setData] = React.useState<Data[]>([]);

  const recursiveNode = React.useCallback(() => {
    // 요청을 보내고 받아와야함
    // 임시 setTimeout을 사용
    setTimeout(() => {
      setData(
        sortIsDir([
          {
            path: "model/MLmodel",
            is_dir: false,
            file_size: 380,
          },
          {
            path: "model/conda.yaml",
            is_dir: false,
            file_size: 134,
          },
          {
            path: "model/data",
            is_dir: true,
          },
        ])
      );
    }, 100);

    return data.length > 0 ? <Tree data={data} /> : <div>no data</div>;
  }, [data]);
  return (
    <>
      <span
        onClick={() => {
          setIsOpen(!isOpen);
        }}
      >
        {isOpen ? <ArrowRightOutlinedIcon /> : <FolderOpenOutlinedIcon />}
        parent --- {title}
      </span>
      {isOpen && <div>{recursiveNode()}</div>}
    </>
  );
}

// 여기서 받는 데이터는 처음 받는 데이터임
// 처음받은 데이터란 root페이지가 렌더 되었을 때 받은 데이터
function Tree({ data }: ITreeProps) {
  const setIsContentOpen = useSetRecoilState(contentOpenState);

  return (
    <Root>
      {sortIsDir(data).map((el: Data, idx: number) => {
        if (el.is_dir) {
          return <ParentNode title={el.path} key={idx} />;
        } else {
          return (
            // 자식은 그냥 div 태그입니다.
            <Child
              key={idx}
              onClick={() => {
                setIsContentOpen(true);
              }}
            >
              <InsertDriveFileOutlinedIcon />
              {el.path}
            </Child>
          );
        }
      })}
    </Root>
  );
}

サマリ


コードはまだ整理されていませんが、雑然としています.
1 . レンダリング時にツリーにデータを転送する
2.tree受信したデータはフォルダをファイルの後ろに移動します
3.その後、繰り返し文で子どもと親を3つに分類する
4.親コンポーネントはフォルダであり、開くとapiリクエストが発行されます.
5.ここでapi要求はuseCallで開くと正常に動作する
6.ツリー構成部品をuseCallbackのcallbackコールバック関数の戻り値として使用する
JavaScriptシーケンスと組合せアルゴリズム
Attributeとカスタムプロパティ