如何在 REACT NATIVE 中呈现 HTML 标签答案

【问题标题】：How to render HTML tags in REACT NATIVE如何在 REACT NATIVE 中呈现 HTML 标签
【发布时间】：2021-12-13 00:19:34
【问题描述】：

我想在我的 react native 应用程序中显示新闻，但来自 API 的内容是 HTML。那么，请你告诉我如何在没有任何库的情况下呈现 HTML。

  "content": "<ul><li>Bitcoin, in terms of market value, rose 4.6% to $53,859.6.</li><li>It passed $50,000 mark for first time in four weeks on Tuesday. </li><li>Bitcoin fell below $50,000 in early September.</li>"

【问题讨论】：

标签： javascript html node.js react-native api

【解决方案1】：

如果没有库，您可以使用 dangerouslySetInnerHTML 呈现 HTML：

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

但是，不建议这样做，因为它可能用于跨站脚本 (XSS) 攻击

【讨论】：

【解决方案2】：

const yourDataObject = {
    "content": "<ul><li>Bitcoin, in terms of market value, rose 4.6% to $53,859.6.</li><li>It passed $50,000 mark for first time in four weeks on Tuesday. </li><li>Bitcoin fell below $50,000 in early September.</li>"
}

const area = document.getElementById("area")
area.innerHTML = yourDataObject.content;

&lt;div id="area"&gt;&lt;/div&gt;

决定要在哪里呈现 HTML。在下面的示例中，我将把内容渲染到 div 标记中，该标记的 id 属性为“area”。

<div id="area"></div>

在您的 JavaScript 中，您可以选择带有 document.getElemenyById 的元素并传入 id 属性值。接下来定位所选div 元素的innerHtml 并将其设置为您的内容。

const yourDataObject = {
    "content": "<ul><li>Bitcoin, in terms of market value, rose 4.6% to $53,859.6.</li><li>It passed $50,000 mark for first time in four weeks on Tuesday. </li><li>Bitcoin fell below $50,000 in early September.</li>"
}

const area = document.getElementById("area")
area.innerHTML = yourDataObject.content;

注意

始终确保您信任您选择在网站中呈现的 HTML 的来源。如果您不控制源，您可能会将恶意代码呈现到您的网站中。

【讨论】：