Bagaimana untuk Membuat HTML Mentah dalam React Safely?

Merender HTML Mentah dengan React: Pendekatan Lebih Selamat

Dalam React, memberikan HTML mentah boleh menjadi tugas yang rumit. Walaupun kaedah tradisional menggunakan dangerouslySetInnerHTML berfungsi dalam versi terdahulu, ia telah ditamatkan kerana kebimbangan keselamatan. Walau bagaimanapun, kini terdapat kaedah yang lebih selamat.

Pilihan Paparan Selamat

Untuk pemaparan HTML yang lebih selamat, anda mempunyai empat pilihan utama:

1. Unicode: Simpan fail anda sebagai UTF-8 dan tetapkan charset kepada UTF-8. Gunakan aksara Unikod untuk simbol dan entiti khas.
2. Nombor Unikod: Di dalam rentetan JavaScript, gunakan nombor Unikod untuk entiti yang dikehendaki.
3. Array Campuran: Gabungkan rentetan dan elemen JSX dalam tatasusunan untuk pemaparan.
4. dangerouslySetInnerHTML: Sebagai pilihan terakhir, gunakan dangerouslySetInnerHTML dengan hati-hati, memastikan bahawa input yang diberikan aman dan tepercaya.

Contoh Menggunakan Pilihan Tatasusunan Campuran:

const markup = [
  'First ',
  <span>&amp;middot;</span>,
  ' Second'
];

return <div>{markup}</div>;

Kesimpulan

Semasa memaparkan HTML mentah dengan React boleh diperlukan dalam senario tertentu, adalah penting untuk mengutamakan keselamatan. Dengan menggunakan kaedah lebih selamat yang digariskan di atas, anda boleh memastikan keselamatan dan kebolehpercayaan aplikasi React anda sambil masih memenuhi keperluan pemaparan anda.

Atas ialah kandungan terperinci Bagaimana untuk Membuat HTML Mentah dalam React Safely?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!