Bagaimana untuk Memaparkan Rentetan HTML dengan Betul dalam React?

Memaparkan Rentetan HTML sebagai HTML Sebenar

Apabila cuba memaparkan kandungan HTML sebagai HTML sebenar, senario tertentu mungkin membawa kepada hasil yang tidak dijangka di mana rentetan diberikan sebagai teks dan bukannya ditafsirkan sebagai HTML. Untuk menangani isu ini, adalah penting untuk memastikan bahawa rentetan HTML disertakan dalam petikan berganda dan dinyahkodkan jika perlu.

Satu pendekatan untuk menyelesaikan masalah ini ialah dengan menyertakan rentetan HTML dalam petikan berganda dalam sifat dangerouslySetInnerHTML, sebagai ditunjukkan dalam contoh berikut:

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

Walau bagaimanapun, jika rentetan HTML disimpan sebagai objek, ia tidak akan dipaparkan sebagai HTML. Dalam kes sedemikian, objek mesti diubah menjadi rentetan sebelum ditugaskan kepada dangerouslySetInnerHTML.

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

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

Selain itu, apabila berurusan dengan entiti HTML dalam rentetan HTML, adalah penting untuk menyahkodnya sebelum memberikannya kepada dangerouslySetInnerHTML . Ini boleh dicapai menggunakan fungsi htmlDecode:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p>&amp;lt;strong&amp;gt;Our Opportunity:&amp;lt;/strong&amp;gt;</p>'
    }
  }

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

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

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

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