Bagaimana untuk Menyuntik Pembolehubah HTML dengan Selamat ke dalam JSX dengan `dangerouslySetInnerHTML`?

Membenamkan Pembolehubah Reaksi dalam JSX: Helah Ajaib dengan dangerouslySetInnerHTML

Dalam React, menyepadukan HTML dengan pembolehubah dalam kod JSX anda dengan lancar boleh menjadi perniagaan yang rumit. Katakan anda mempunyai pembolehubah React yang mengandungi penanda HTML, seperti:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

Untuk memasukkan HTML ini ke dalam komponen React anda, anda mungkin tergoda untuk melakukan sesuatu seperti:

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

Walau bagaimanapun, pendekatan ini tidak akan membuat HTML secara ajaib seperti yang anda harapkan. Untuk berbuat demikian, anda perlu menggunakan sifat React khas: dangerouslySetInnerHTML.

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

Dengan dangerouslySetInnerHTML, React akan menganggap nilai pembolehubah sebagai HTML yang dipercayai dan menjadikannya secara langsung. Ini membolehkan anda memasukkan coretan HTML secara dinamik ke dalam komponen anda, memberikan fleksibiliti dan kecekapan.

Awas: Gunakan dengan Berhati-hati

dangerouslySetInnerHTML ialah alat yang berkuasa, tetapi ia disertakan dengan amaran keselamatan. Kerana ia membolehkan anda membenamkan HTML secara langsung ke dalam aplikasi React anda, ia berpotensi memperkenalkan kelemahan keselamatan, seperti serangan XSS. Jadi, sentiasa gunakan harta ini dengan berhati-hati dan hanya apabila benar-benar perlu.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik Pembolehubah HTML dengan Selamat ke dalam JSX dengan `dangerouslySetInnerHTML`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!