Memberikan Rentetan HTML sebagai HTML dengan React

Dalam React, anda sering menghadapi situasi di mana anda perlu menjadikan rentetan HTML sebagai kandungan HTML sebenar. Walaupun beberapa percubaan mungkin menyebabkan rentetan dipaparkan sebagai rentetan dan bukannya HTML, terdapat beberapa pendekatan yang boleh anda pakai untuk mencapai hasil yang diingini.

Salah satu kaedah ialah menggunakan sifat berbahayaSetInnerHTML semasa mencipta elemen HTML. Sifat ini membolehkan anda memasukkan HTML mentah ke dalam komponen. Contohnya, jika anda mempunyai rentetan HTML yang mengandungi

elemen, anda boleh menggunakan sintaks berikut:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Salin selepas log masuk

Ini sepatutnya menyebabkan

elemen dengan betul dalam DOM. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa rentetan yang anda hantar kepada dangerouslySetInnerHTML mesti sentiasa dibersihkan atas sebab keselamatan.

Dalam kes khusus anda, apabila this.props.match.description tidak dipaparkan sebagai HTML, anda boleh mencuba berikut:

1. Sahkan jenis: Pastikan bahawa this.props.match.description ialah rentetan dan bukannya objek. Jika ia adalah objek, ia mungkin perlu ditukar kepada rentetan.
2. Semak penanda yang betul: Jika rentetan itu sememangnya rentetan, periksa ia untuk sebarang isu penandaan yang berpotensi. Pastikan semua teg ditutup dengan betul dan tiada entiti aksara yang boleh mengganggu pemaparan.
3. Nyahkod entiti HTML: Jika anda berurusan dengan entiti HTML, mereka mungkin perlu dinyahkodkan sebelum menghantarnya ke dangerouslySetInnerHTML. Anda boleh menggunakan fungsi seperti htmlDecode untuk mencapai perkara ini.

Dengan melaksanakan langkah-langkah ini, anda seharusnya berjaya menjadikan rentetan HTML sebagai HTML sebenar dalam aplikasi React anda. Walau bagaimanapun, sentiasa penting untuk mengutamakan keselamatan dengan membersihkan input sebelum menggunakan sifat berbahayaSetInnerHTML.

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