使用 React 將 HTML 字串渲染為 HTML

在 React 中，您經常會遇到需要將 HTML 字串渲染為實際 HTML 內容的情況。雖然某些嘗試可能會導致字串顯示為字串而不是 HTML，但您可以採用多種方法來實現所需的結果。

一種方法是在建立 HTML 元素時使用angerouslySetInnerHTML 屬性。此屬性可讓您將原始 HTML 插入到元件中。例如，如果您有一個包含

的 HTML 字串，元素，您可以使用以下語法：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

登入後複製

這應該呈現

元素在 DOM 中正確存在。但是，請務必注意，出於安全原因，必須始終對傳遞給angerlySetInnerHTML的字串進行清理。

在您的特定情況下，this.props.match.description未呈現為HTML，您可以嘗試以下：

1. 驗證類型：確保this .props.match.description 是字串而不是物件。如果它是一個對象，它可能需要轉換為字串。
2. 檢查正確的標記：如果字串確實是一個字串，請檢查它是否有任何潛在的標記問題。確保所有標籤都正確關閉，並且沒有可能幹擾渲染的字元實體。
3. 解碼 HTML 實體：如果您正在處理 HTML 實體，它們可能需要在將它們傳遞給angerlySetInnerHTML 之前進行解碼。您可以使用 htmlDecode 之類的函數來實現此目的。

透過實作這些步驟，您應該能夠在 React 應用程式中成功將 HTML 字串呈現為實際的 HTML。然而，在使用危險的SetInnerHTML屬性之前，透過清理輸入來優先考慮安全性始終是至關重要的。

以上是如何在 React 中將 HTML 字串渲染為 HTML？的詳細內容。更多資訊請關注PHP中文網其他相關文章！