如何在 REACT NATIVE 中呈现 HTML 标签

Question

我想在我的 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>"
    

Answer 1

如果没有库，您可以使用risklySetInnerHTML渲染 HTML：

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

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

Answer 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;

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

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

<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 的来源。 如果您不控制源，则可能会将恶意代码渲染到您的站点中。