我正在谈论this screenshot中所见的用户界面。在该程序中，macOS Finder左侧有一列，列出目录中的所有项目。如果单击某个项目，并且该项目本身就是一个目录，则会在右侧打开一个包含所有其条目的新列，这将永远重复。
我想使用React为简单的文本编辑Web应用程序编写这样的UI。每列都包含文件夹或文本“文件”。单击文件夹将在下一列中打开该文件夹的子项;单击文本“文件”会将其文本放在textarea元素中以供阅读或编辑。
但我无法弄清楚如何构建数据。
我想我想要一种树，其中节点可以是文本文件或文件夹/树本身。但是，我如何在React中渲染该树，我可以使用哪种模式的组件？我是否将当前树的顶层渲染为一个列组件，并在该组件中有一个onclick处理程序，如果单击一个子文件夹，它会向父组添加一个新列？如果是这样，我会将该组件传递给树的子部分，或者传递给树的整个部分吗？
