如何将html元素转换为JSX？ [英] How to convert html elements into JSX?

问题描述

我基本上有两个问题。

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

1.) I have this basic reactjs component. How can I convert it into JSX? I mean I want this code to look like reactjs style code.

2。）如果我从后端收到这样的数组

2.) If I receive an array from backend like this

  [ '/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' ]

如何动态创建嵌套对象，如代码中所示？我不知道它的嵌套程度有多深。

How can I create nested object dynamically like the one shown in the code? I don't know how deep nested it could be.

任何帮助都会非常感激......

Any help would be really appreciated......

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

推荐答案

一个方式将是一种递归技术。使用对象属性来确定要渲染的组件类型，它应该是什么样的道具以及应该具有哪些子项。您可以使用 React.createElement（...）。这是我为递归渲染嵌套对象所做的一个片段。它会根据您的数据形状和其他各种事情而有所不同，但它是一个起点：

One way would be a recursive technique. Use the object properties to determine what type of component to render, what it's props should be and what children it should have. You can use React.createElement(...) for that. Here's a snippet I did for recursively rendering a nested object. It'll be different depending on the shape of your data and various other things of course, but it's a starting point:

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

首先从数组构建嵌套对象，这是另一个你必须先做的任务。也许把它分成两个单独的问题。

As for building that nested object from the array in the first place, that's another task you'd have to do first. Maybe split this into 2 separate questions.

这篇关于如何将html元素转换为JSX？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！