如何在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

如果没有库，你可以使用dangerouslySetInnerHTML:

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

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

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。在下面的示例中，我将把内容呈现到div标记中，该标记的id属性为"area"

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

在JavaScript中，您可以选择具有document.getElemenyById的元素并传递id属性值。下一个目标的innerHtml选定的div元素，并将其设置为您的内容。

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