时间戳

首页 > 解决方案 > 如何在 React 中显示应用了 HTML 标记的 JSON 数据？

javascript - 如何在 React 中显示应用了 HTML 标记的 JSON 数据？

问题描述

所以我有 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()，因为我需要将标签应用于文本。
有什么建议吗？非常感谢 ：）

标签： javascripthtmlcssreactjs

解决方案

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

推荐阅读