Bagaimana untuk Memaparkan Rentetan HTML dengan Selamat dalam React Menggunakan dangerouslySetInnerHTML?

Memaparkan Rentetan HTML dengan Selamat sebagai HTML

Dalam senario ini, isu timbul apabila cuba memaparkan rentetan kandungan HTML biasa, tetapi ia sebaliknya muncul sebagai rentetan tanpa ditafsirkan sebagai HTML. Ini biasanya ditemui apabila sifat yang digunakan dalam dangerouslySetInnerHTML ialah objek dan bukannya rentetan.

Untuk menyelesaikan masalah ini, pastikan sifat this.props.match.description ialah rentetan. Jika tidak, tukarkannya kepada HTML sebelum menyerahkannya kepada harta.

Mengendalikan Entiti HTML

Komplikasi tambahan timbul apabila berurusan dengan entiti HTML. Dalam kes sedemikian, anda perlu menyahkod entiti sebelum menghantarnya kepada dangerouslySetInnerHTML.

Contoh Kod

Pertimbangkan contoh kod berikut:

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

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

  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Dalam contoh ini, sifat perihalan mengandungi entiti HTML (< dan >). Untuk memaparkannya dengan betul, fungsi htmlDecode digunakan untuk menyahkod entiti ini sebelum menghantar HTML kepada dangerouslySetInnerHTML.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Rentetan HTML dengan Selamat dalam React Menggunakan dangerouslySetInnerHTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!