我基本上有两个问题。

1.) 我有这个基本的 reactjs 组件。如何将其转换为 JSX？我的意思是我希望这段代码看起来像 reactjs 风格的代码。

2.) 如果我像这样从后端收到一个数组

  [ '/parent-folder-1/child-folder-1/file1.jpg', '/parent-folder-1/child-folder-1/file2.jpg', '/parent-folder-1/child-folder-2/file3.jpg', '/parent-folder-2/child-folder-1/somefile.jpg' ]

如何像代码中显示的那样动态创建嵌套对象？我不知道嵌套有多深。

任何帮助将非常感激......

class Filetree extends Component {
      constructor() {
        super();
        this.state = {
          folders: [
            {
              type: "dir",
              name: "app",
              children: [
                {
                  type: "file",
                  name: "index.html"
                },
                {
                  type: "dir",
                  name: "js",
                  children: [
                    {
                      type: "file",
                      name: "main.js"
                    },
                    {
                      type: "file",
                      name: "misc.js"
                    }
                  ]
                }
              ]
            }
        };
      }

      displayJsonTree(data) {
        var htmlRetStr = `<ul className='folder-container'>`;
        for (var key in data) {
          if (typeof data[key] === "object" && data[key] !== null) {
            htmlRetStr += this.displayJsonTree(data[key]);
            htmlRetStr += `</ul>`;
          } else if (data[key] === "dir") {
            htmlRetStr += `<li className='folder-item'> ${
              data["name"]
            } </li> <li className='folder-wrapper'>`;
          } else if (key === "name" && data["type"] !== "dir") {
            htmlRetStr += `<li className='file-item'> ${data["name"]} </li>`;
          }
        }
        return htmlRetStr;
      }

      render() {
        const { folders } = this.state;

        return <div dangerouslySetInnerHTML={{ __html: this.displayJsonTree(folders) }} />;
      }
    }