Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menghasilkan HTML Mentah dalam Bertindak Dengan Selamat Tanpa `dangerouslySetInnerHTML`?

Bagaimana untuk Menghasilkan HTML Mentah dalam Bertindak Dengan Selamat Tanpa `dangerouslySetInnerHTML`?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-26 18:27:30315semak imbas

How to Render Raw HTML in React Safely Without `dangerouslySetInnerHTML`?

Render Raw HTML in React using Safer Methods

Dalam React, anda kini boleh memaparkan HTML mentah menggunakan kaedah yang lebih selamat, mengelakkan penggunaan berbahayaSetInnerHTML . Berikut ialah empat pilihan:

1. Pengekodan Unikod

Gunakan aksara Unikod untuk mewakili entiti HTML dalam fail yang dikodkan UTF-8:

<div>{`First \u00b7 Second`}</div>

2. Nombor Unikod dalam Rentetan JSX

Tukar entiti HTML kepada nombor Unikod dalam rentetan JSX:

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3. Susunan Campuran Rentetan dan Elemen JSX

Gabungkan rentetan dan elemen JSX untuk menjadikan HTML kompleks:

<div>{[`First `, <span>&middot;</span>, ` Second`]}</div>

4. DangerouslySetInnerHTML as Last Resort

Hanya gunakan dangerouslySetInnerHTML sebagai pilihan terakhir, kerana ia memperkenalkan potensi kelemahan keselamatan:

<div dangerouslySetInnerHTML={{__html: `First &middot; Second`}} />

Atas ialah kandungan terperinci Bagaimana untuk Menghasilkan HTML Mentah dalam Bertindak Dengan Selamat Tanpa `dangerouslySetInnerHTML`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn