Question

我基本上有两个问题。

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) }} />;
      }
    }

Answer 1

一种方法是递归技术。使用对象属性来确定要渲染的组件类型，其道具应该是什么以及应该拥有哪些子代。您可以使用React.createElement(...)。这是我递归渲染嵌套对象的代码片段。当然，这取决于数据的形状和其他各种情况，但这是一个起点：

recursivelyRenderLinks(element) {
    const { children, ...props } = element;
    return React.createElement(
        TitleLink,
        props,
        children.length > 0 ?
        children.map((child) => this.recursivelyRenderLinks(child)) : null
    );
}

首先要从数组构建嵌套对象，这是您首先要执行的另一项任务。也许将其分为两个独立的问题。

如何将html元素转换为JSX？

1 个答案: