Javascript ReactJS-如何以字符串形式返回html元素列表作为html元素

我有一个React类，它从JSON生成一个html元素字符串：

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"

class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data 
}

  render()

  {
    var df4 = df3["ds"]
    var d1 = '';
    for (var key in df4)
    {
       var host = df4[key];
       d1 += '<div class="'+key+'" value="'+host[0]+'"/>';
    }

    return (
      <div id="Maps"><div>
    )
  }
}

console logging v1向我们显示字符串（每个对象的第一个值）：

“”

我想将这个字符串转换成一组html元素，并返回它们

return (
      <div id="Maps"> 
        <div class="s1" value="0"/> 
        <div class="s2" value="0"/>
        <div class="s3" value="2"/> 
      </div>
    )

返回(
)

---

非常感谢您的帮助：）

在父html元素上使用危险的LysetinerHTML属性，如：

let htmlString = '<div class="s1" value="0"/><div class="s2" value="0"/><div class="s3" value="2"/>'

让htmlString=''

确保变量htmlString是可访问的。然后将其放入div或任何其他元素：

<div dangerouslySetInnerHTML={{ __html: htmlString) }}></div>

---

我创建了一个在这个沙箱url中使用map的示例->

/.json
[
{“类”：“s1”，“值”：“0”}，
{“类”：“s2”，“值”：“1”}，
{“类”：“s3”，“值”：“2”}，
{“类”：“s4”，“值”：“3”}
]
从“React”导入React；
从“/data.json”导入数据；
导入“/styles.css”；
导出默认函数App（）{
返回(
{data.map（元素=>(
{element.value}
))}
);
}

如何呈现列表是必须映射到数组并返回新的jsx元素的一部分，因为现在您使用一个简单的字符串操作，但jsx元素并没有那个么简单，所以请参见我的示例：

const list=df4.map（e=>{e.value}

。然后呈现它

render（）{return list}

这给了我“df4.map不是函数”这意味着

df4

不是一个数组。使用

Object.entries（df4）.map（[key，host]）=>…）

正如我在评论中所说，你基本上是在重复官方文档。我得到：data\u df3\u json\u网页包\u IMPORTED\u MODULE\u 3\u。map不是一个函数你能发布你的df3.json吗？发布了json（简化版）：）这不是一个有效的json数组，在

render

函数中像普通函数一样呈现

div

元素更有意义。手工构建HTML似乎没有任何好处。

let htmlString = '<div class="s1" value="0"/><div class="s2" value="0"/><div class="s3" value="2"/>'

<div dangerouslySetInnerHTML={{ __html: htmlString) }}></div>

//.json
    [
     { "class": "s1", "value": "0" },
     { "class": "s2", "value": "1" },
     { "class": "s3", "value": "2" },
     { "class": "s4", "value": "3" }
    ]


import React from "react";
import data from "./data.json";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div id="Maps">
        {data.map(element => (
          <div className={element.class} key={element.value}>
            {element.value}
          </div>
        ))}
      </div>
    </div>
  );
}