React 中正確渲染 HTML 內容的技巧

在實務串接上，常常遇到資料來源是HTML格式，在React 中HTML也會被轉換成字串直接顯示在頁面上，導致頁面一堆大眾看不懂的code。

React 中正確渲染 HTML

在 React 中如果需要正確渲染 HTML 內容，你需要使用 dangerouslySetInnerHTML 才能將HTML 資料正確且完整顯示，以下是 React 正確渲染 HTML 的範例:

<!-- htamData 就是你要顯示的資料 -->
<div dangerouslySetInnerHTML={{ __html: htamData }}>
</div>

你也可以不透過變數，直接使用 HTML，效果是一樣的

<div dangerouslySetInnerHTML={{ __html: '<p>react Html tag example</p>' }}>
</div>

相關參考資料

如果想進一步了解 React 中 dangerouslySetInnerHTML 的詳細用法與說明，可以前往 React 官方文件 – dangerouslySetInnerHTML 進行查看。