如何在 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 的來源。 如果您不控制源，則可能會將惡意代碼渲染到您的站點中。