Bagaimana untuk Menyuntik Kandungan HTML Menggunakan Pembolehubah Reaksi dalam JSX?

Menggabungkan HTML dengan Pembolehubah React dalam JSX

Anda sedang membina aplikasi dengan React dan memerlukan keupayaan untuk memasukkan kandungan HTML menggunakan pembolehubah React dalam JSX anda. Berikut ialah penyelesaian untuk mencapai ini:

Menggunakan dangerouslySetInnerHTML

Untuk mencapai kefungsian yang anda inginkan, anda boleh menggunakan sifat dangerouslySetInnerHTML. Sifat ini membolehkan anda menetapkan secara langsung kandungan HTML elemen sebagai rentetan. Berikut ialah contoh cara anda boleh menggunakannya:

<code class="jsx">render: function() {
    const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}</code>

Dengan memberikan nilai rentetan HTML anda kepada pembolehubah thisIsMyCopy dan kemudian menetapkannya sebagai nilai __html berbahayaSetInnerHTML, anda boleh memasukkan kandungan HTML yang anda inginkan dengan berkesan dalam komponen React anda. Ini akan menyebabkan HTML dipaparkan dalam elemen seperti yang dijangkakan.

Pertimbangan Tambahan

Perlu ambil perhatian bahawa dangerouslySetInnerHTML boleh menjadi risiko keselamatan jika tidak dikendalikan dengan betul. Ia membolehkan anda membuat HTML sewenang-wenangnya, yang mungkin berpotensi memperkenalkan kelemahan XSS. Oleh itu, adalah penting untuk memastikan kandungan HTML yang anda suntik dipercayai dan datang daripada sumber yang boleh dipercayai.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik Kandungan HTML Menggunakan Pembolehubah Reaksi dalam JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!