0
私はthis screenshotに見られるUIについて話しています。そのプログラムでは、macOS Finderの左側に、ディレクトリ内のすべての項目を一覧表示する列があります。アイテムをクリックすると、そのアイテム自体がディレクトリになっている場合は、ののすべてのエントリを含む新しい列が右側に開き、これが永久に繰り返されます。Reactを使用して列UIを実装するにはどうすればよいですか？
単純なテキスト編集WebアプリケーションでReactを使用してこのようなUIを作成したいと思います。各列にはフォルダまたはテキスト「ファイル」が含まれます。フォルダをクリックすると、次の列のそのフォルダの子が開きます。テキスト 'ファイル'をクリックすると、そのテキストがテキスト領域に読み込まれたり編集されたりします。
しかし、私はどのようにデータを構造化するか分かりません。
私は、ノードがテキストファイルまたはフォルダ/ツリーのいずれかになるような、ある種のツリーを望むと思います。しかし、どのようにしてReactでそのツリーをレンダリングすればよいのですか？現在のツリーの最上位レベルを1つの列コンポーネントにレンダリングし、そのコンポーネントにonclickハンドラを追加して、サブフォルダがクリックされた場合に新しい列を親に追加しますか？もしそうなら、そのコンポーネントをいくつかの参照をツリーのサブ部分に渡すか、そのツリーの全部分を渡しますか？