时间戳

首页 > 解决方案 > 如何在 ReactJS 中迭代 HTML 内容

html - 如何在 ReactJS 中迭代 HTML 内容

问题描述

我有一个 API，它以电子邮件数组的形式返回响应，这些电子邮件是实际的电子邮件正文（带有 HTML 标记和转义字符和样式）。

如果它是像这样的单个 HTML 主体 - >“内容”，我可以轻松创建一个元素并将其 innerHTML 设置为此值，但我需要遍历字符串列表并将它们显示在页面中，我正在使用 ReactJS

寻找这样做的选项，请为此提出一些解决方案。

标签： htmlreactjs

解决方案

假设this.state.emailList是一系列电子邮件，您会这样做

state = {
    emailList : [
        "<div>email text</div>",
        "<div>email text</div>"
    ]
}

在您的渲染功能中，您会这样做。

render() {
    return (
        <div>
            {this.state.emailList.map (
                email => (<p  dangerouslySetInnerHTML={{__html: email}}></p>)
            )}
        </div>
    )
}

.map 用于映射 javascript 中的项目列表，它需要一个回调函数，该函数返回当前元素email。

dangerouslySetInnerHTML 用于在 react 中显示外部 HTML 内容

希望这可以帮助

推荐阅读