如何在 Reactjs 中渲染 html 元素？

Question

我对 reactjs 很陌生，还在学习它。

我正在尝试返回文件树视图，但它显示了页面上的所有元素，就像这样..

<ul className='folder-container'>
  <li className='folder-item'> app </li>
  <li className='folder-wrapper'><ul className='folder-container'><ul className='folder-container'>
  <li className='file-item'> index.html </li></ul><ul className='folder-container'>
  <li className='folder-item'> js </li>
  <li className='folder-wrapper'>
<ul className='folder-container'>....

---

我想返回页面上文件夹内所有项目的列表。我想我可以使用组件内的函数返回它。我做得对吗？

我的代码：

class Filetree extends Component {
  constructor({ props }) {
    super(props);
    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: "app.js"
                },
                {
                  type: "file",
                  name: "misc.js"
                }
              ]
            }
          ]
        },
        {
          type: "dir",
          name: "css",
          children: [
            {
              type: "file",
              name: "reset.css"
            },
            {
              type: "file",
              name: "main.css"
            }
          ]
        }
      ]
    };
  }

  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>{this.displayJsonTree(folders)}</div>;
  }
}

Answer 1

如果字符串中有 HTML，则可以使用 dangerouslySetInnerHTML。

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

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