Bagaimanakah Saya Boleh Menyampaikan Rentetan HTML dengan Selamat sebagai JSX dalam ReactJS?

Menukar Rentetan HTML kepada ReactJS JSX

Dalam ReactJS, memaparkan data HTML yang diambil daripada permintaan AJAX boleh menimbulkan cabaran kerana ia biasanya memberikan data sebagai teks. Untuk mengatasi isu ini dan memaparkan kandungan HTML, ReactJS menyediakan penyelesaian.

Penyelesaian: dangerouslySetInnerHTML

ReactJS termasuk sifat khas yang dipanggil dangerouslySetInnerHTML yang membolehkan anda memaparkan HTML sebagaimana adanya . Walau bagaimanapun, sifat ini digunakan dengan berhati-hati kerana ia memintas perlindungan XSS (Skrip silang tapak) terbina dalam React.

Untuk menggunakan dangerouslySetInnerHTML, hanya hantar data HTML sebagai nilai:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

Penyesuaian

Jika anda ingin mengubah suai HTML yang diberikan dalam apa jua cara, anda boleh menggunakan komponen seperti react-html-parser atau react-dom-parser. Komponen ini membolehkan anda menghuraikan dan mengubah suai data HTML sebelum memaparkannya dalam apl ReactJS anda.

Pertimbangan Keselamatan

Perlu ambil perhatian bahawa dangerouslySetInnerHTML hanya boleh digunakan apabila benar-benar perlu. Penggunaan yang tidak betul boleh mengakibatkan kelemahan XSS. Untuk melindungi daripada kod hasad, pastikan data HTML dibersihkan dan disahkan sebelum dipaparkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyampaikan Rentetan HTML dengan Selamat sebagai JSX dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!