Відобразити код JSX з даних JSON в Reactjs - json, реагує

У мене є JSON, який містить код JSX, тобто

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

У своєму компоненті спочатку я імпортую 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>};

Замість тегу JSX {this.state.footy.content} відображається у вигляді рядка. Я шукав подібну проблему, але не зміг її знайти.

Відповіді:

2 для відповіді № 1

Замість того, щоб зберігати HTML-вміст у json, слід зберігати дані та створювати вміст у подібному JSX

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, ви можете використовувати його dangerouslySetInnerHTML люблю

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

---