Question

我有一个包含JSX代码的JSON，即

var data = {"content":"<ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul>"}

在我的Component中，首先导入JSON，即

import data from './data.json';

然后我

this.state = {footy: data}

现在在我的渲染函数中，我希望显示它，但是从JSON数据中获取内容：

render() {<div><ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul></div>};

所以，这是我的渲染功能：

render(){<div>{this.state.footy.content}</div>};

{this.state.footy.content}显示为字符串，而不是JSX标记。我搜索过类似的问题，但我找不到。

Answer 1

您应该存储数据并在JSX中创建内容，而不是将内容HTML存储在json中，而不是

    <!DOCTYPE>
    <html>
    <head>

    </head>
    <body>
     <input type="text" id="name" value="">
     <input type="button" onclick="add_option()" value="add person">
     <select id="select">
    </select>
    <script>
     var option_list = [];
       // for loop at thats option_list to select select tag

     
      var select = document.getElementById("select");     

    function add_option(name){
    var name = document.getElementById("name").value;
     var option = document.createElement("option");
      var label = document.createTextNode(name);
      option.setAttribute("id", name); //Adding ID to the option list
      option.setAttribute("class", "intersect-option"); // adds classes to option
      option.value = name; // adds value to option list 
      
      option.appendChild(label);
      select.appendChild(option); // Adds option to the list.
    }



    </script>
    </body>
    </html>

并在渲染中

var data = [
  {name: 'Firmino', goals: 22}
];

this.state = {footy: data}

如果您绝对需要呈现HTML，则可以使用render() { return <div> <ul className='list-group'> {this.state.footy.map((player) => { return <React.Fragment> <li className='list-group-item' onClick={() => this.svgMapClicked(player)}>Name: {player.name}</li> <li className='list-group-item' >Goals: {player.goals}</li> </React.Fragment> })} </ul> </div> };之类的

dangerouslySetInnerHTML

从Reactjs中的JSON数据显示JSX代码

1 个答案: