如何在 React 中显示应用了 HTML 标记的 JSON 数据？ [复制]答案

【问题标题】：How do I display JSON data with HTML tags applied, in React? [duplicate]如何在 React 中显示应用了 HTML 标记的 JSON 数据？ [复制]
【发布时间】：2021-05-14 07:30:34
【问题描述】：

所以我有 JSON 数据，中间有一堆 html 标签。我已获取并显示如下数据。

componentDidMount() {
        this._callCake();
    }

_renderEachCake = () => {
    return (
        <EachCake 
        image={this.state.cake_object.image}
        body={this.state.cake_object.body}
        />
    );
  };

_callCake = () => {
        return fetch(`http://127.0.0.1:8000/api/cake/1`)
        .then((response) => response.json())
        .then(data => {
            this.setState({cake_object : data})
        })
        .catch((err) => console.log(err))
    }


render() {
    return (
        <div>
            <Container>
                <Row className="justify-content-center">
                    <Col><CakeHeader /></Col>
                </Row>
                <Row className="justify-content-center">
                    <Col>this._renderEachCake()</Col>
                </Row>
            </Container>
        </div>
    )
}

但是，当我在屏幕上看到数据时，我看到所有带有 html 标记的“原始”数据，未应用。如下：

<p>&nbsp;<span style="font-size: 1rem;">This is how</span>all the text<span style="background-color: rgb(255, 255, 0);"> look like</span>

我不能使用replace()，因为我需要将标签应用于文本。
有什么建议吗？非常感谢:)

【问题讨论】：

这能回答你的问题吗？ Get HTML in JSON to render as HTML in React Component

标签： javascript html css reactjs

【解决方案1】：

要在 react 组件中显示 HTML，您应该像这样使用dangerouslySetInnerHTML：

  <div
    dangerouslySetInnerHTML={{ __html: data.content }}
  />

【讨论】：

【解决方案2】：

您可以使用 React 的 dangerouslySetInnerHTML 来设置元素的 HTML 内容，而不是文本内容

【讨论】：

【解决方案3】：

您可以使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={ { __html: data.path.to.element } }></div>

【讨论】：