如何避免React渲染的字符串帶有引號？

Question

我正在嘗試將HTML代碼段存儲在Javascript字符串中，然后在單擊“查看源代碼”按鈕時以響應的方式呈現它們。

這是字符串的示例：

var testString = "&lang;!DOCTYPE HTML&rang;"

在我的React組件的render函數中，它看起來像：

return <pre>{testString}</pre>;

但是，這只是吐出字符串，而不轉換任何轉義字符。 當我檢查HTML時，該字符串會插入HTML內，並帶有引號。 我嘗試使用：

var testString = String(/&lang;!DOCTYPE HTML&rang;/).substring(1).slice(0,-1);

刪除字符串中的引號，但這沒有任何改變。 我也曾嘗試將其放在<p> ， <div>和<code>標記中，但沒有成功。 關於為什么要這樣做的任何想法？

另外，如果這是瀏覽器在引號內顯示內容的方式，是否可以在我的網頁上僅在引號內顯示HTML代碼而不使用轉義符？ 即

var testString = "<!DOCTYPE HTML>";

Answer 1

return <pre dangerouslySetInnerHTML={{ __html: testString }} />;