Bagaimana untuk Memaparkan Rentetan HTML sebagai JSX dengan Selamat dalam React?

Tukar Rentetan HTML kepada JSX Boleh Render dalam React

Memperkenalkan Dilema Reaksi

Apabila dipaparkan data yang diterima melalui permintaan AJAX dalam ReactJS, pembangun sering menghadapi isu biasa: data muncul sebagai teks biasa dan bukannya HTML yang diberikan. Ini berlaku disebabkan oleh tingkah laku lalai React yang melarikan diri daripada kandungan HTML untuk menghalang kerentanan skrip silang tapak (XSS).

Menyingkap Penyelesaian

Untuk menangani cabaran ini, React menyediakan sifat dangerouslySetInnerHTML. Dengan menggunakan sifat ini, pembangun boleh menjadikan rentetan HTML sebagai elemen React. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pendekatan ini membawa risiko yang wujud dan harus digunakan dengan berhati-hati.

Membuat Penyelesaian

Untuk menggambarkan penggunaan dangerouslySetInnerHTML, pertimbangkan perkara berikut contoh:

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

Dalam kod ini, rentetan HTML daripada respons AJAX (disimpan dalam this.state.actions) dipaparkan dalam elemen td. Ini membolehkan kandungan HTML dipaparkan dengan betul dalam aplikasi React.

Nota Awas

Walaupun berbahayaSetInnerHTML menyelesaikan isu pemaparan HTML, adalah penting untuk berwaspada apabila menggunakan harta ini. Sebarang potensi kelemahan XSS dalam rentetan HTML boleh menjejaskan keselamatan aplikasi. Anda dinasihatkan untuk menggunakan teknik pembersihan bahagian pelayan untuk memastikan integriti kandungan HTML sebelum memaparkannya dalam React.

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