安全地將HTML 字串渲染為HTML

在這種情況下，嘗試渲染正常的HTML 內容字串時會出現問題，但它而是顯示為字串而不被解釋為HTML。當angerlySetInnerHTML 中使用的屬性是物件而不是字串時，通常會遇到這種情況。

要解決此問題，請確保 this.props.match.description 屬性是字串。如果不是，請在將其指派給屬性之前將其轉換為 HTML。

處理 HTML 實體

處理 HTML 實體時會出現其他複雜情況。在這種情況下，您需要先對實體進行解碼，然後再將其傳遞給angerlySetInnerHTML。

範例程式碼

請考慮以下範例程式碼：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

  htmlDecode(input) {
    const e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

在此範例中，description 屬性包含 HTML 實體（）。為了正確渲染它，在將 HTML 傳遞給angerlySetInnerHTML 之前，使用 htmlDecode 函數對這些實體進行解碼。