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

我有一个包含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>"}

那我有

this.state = {footy: data}

现在，在我的render函数中，我想将其显示为，但从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（）{
Name:Firmino
目标：22个
；

下面是我的渲染函数：

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

render（）{{this.state.footy.content}；

---

代替JSX标记，{this.state.footy.content}显示为字符串。我已经搜索了类似的问题，但找不到。

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

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

this.state = {footy: data}

在渲染中

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

---

我知道你建议的两种方法。事实上，我也尝试过在不使用危险的HTML的情况下呈现HTML。它们都没有达到我的确切目的（即从JSON中呈现JSX内容，*不能使用Html，因为我们不能添加像onClick一样的React事件处理程序）。通过使用Interweave或危险的LysetinerHTML，我能够呈现html，但我还想添加类似onClick的事件处理程序。我们可以通过使用jquery实现它，但我觉得这不是一个好主意！

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

render() {
   return <div dangerouslySetInnerHTML={ { __html : this.state.footy} } />};