在React中正確渲染HTML標籤

Question

我必須在React中創建一個文本模塊，我也使用JSX;我將從JSON文件接收數據。例如：

{ "text-data": "text": "<small> Hello world </small>" }

我試圖做這樣的事情我的模塊中： <p> {this.props.textData.text}</p>

當我試圖使這個在我的JSX文件，它顯示爲與標籤的純文本包括在內。我一直在研究，我發現我可以使用這個函數「Dangerously Set innerHTML」，但不推薦使用它，因爲它可能會導致XSS攻擊。我在這裏讀到關於這個的其他答案，即使用HTML實體工作;但現在我無法完成這項工作。

Answer 1

The dangerouslySetInnerHTML prop有這種情況。實際上，你說你完全信任你輸出的html，並且它是有效的html。你不希望將它用於用戶輸入（除非絕對必要和徹底驗證）。

查看React documentation瞭解更多信息。還有一個以前的類似StackOverflow question。