Javascript 如何在Reactjs中呈现html元素？

我对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'>....

应用程序

index.html

js

。。。。

---

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

我的代码：

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

类文件树扩展组件{
构造函数（{props}）{
超级（道具）；
此.state={
文件夹：[
{
键入：“dir”，
名称：“应用程序”，
儿童：[
{
键入：“文件”，
名称：“index.html”
},
{
键入：“dir”，
名称：“js”，
儿童：[
{
键入：“文件”，
名称：“main.js”
},
{
键入：“文件”，
名称：“app.js”
},
{
键入：“文件”，
名称：“misc.js”
}
]
}
]
},
{
键入：“dir”，
名称：“css”，
儿童：[
{
键入：“文件”，
名称：“reset.css”
},
{
键入：“文件”，
名称：“main.css”
}
]
}
]
};
}
displayJsonTree（数据）{
var htmlRetStr=`
`；
for（var输入数据）{
if（数据类型[键]==“对象”&&数据[键]！==null）{
htmlRetStr+=this.displayJsonTree（数据[key]）；
htmlRetStr+=`
`；
}else if（数据[键]=“dir”）{
htmlRetStr+=`
${
数据[“名称”]
}
`；
}else if（key==“name”&&data[“type”]！==“dir”）{
htmlRetStr+=`
${data[“name”]}
`；
}
}
返回htmlRetStr；
}
render（）{
const{folders}=this.state；
返回{this.displayJsonTree（folders）}；
}
}

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

危险的HTML

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

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

render（）{
const{folders}=this.state；
返回；
}

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

危险的HTML

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

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

render（）{
const{folders}=this.state；
返回；
}

它可以工作。但是建议像这样返回html吗？使用这个危险的LysetinerHTML={{{uuuHTML:this.displayJsonTree（folders）}}有没有更好的方法呢？@Jaz-Yes。如果可能的话，你应该使用JSX。你能提供一个如何在代码中使用JSX的例子吗？我想知道如何使用JSX来代替它。@Jaz这完全改变了问题。你可以创建一个新的问题来问这个问题。它是有效的。但是建议像这样返回html吗？使用这个危险的LysetinerHTML={{{uuuHTML:this.displayJsonTree（folders）}}有没有更好的方法呢？@Jaz-Yes。如果可能的话，你应该使用JSX。你能提供一个如何在代码中使用JSX的例子吗？我想知道如何使用JSX来代替它。@Jaz这完全改变了问题。你可以提出一个新的问题。