时间戳

首页 > 解决方案 > ReactJS - 如何将字符串中的html元素列表作为html元素返回

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

这是json：

{"ds":{
  "s1": {
    "0": 0.0,
    "1": 2.0,
    "2": 0.0,
}
  "s1": {
    "0": 0.0,
    "1": 2.0,
    "2": 0.0,
}
  "s3": {
    "0": 2.0,
    "1": 2.0,
    "2": 0.0,
}}

控制台日志记录 v1 向我们显示字符串（每个对象的第一个值）：

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

我想将此字符串转换为一组 html 元素，并返回它们

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

任何帮助都深表感谢:)

标签： javascriptreactjs

解决方案

我创建了一个在此沙盒 url 中使用地图的示例 -> https://codesandbox.io/s/winter-water-ycy37?fontsize=14&hidenavigation=1&theme=dark

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

推荐阅读