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

Menukar Rentetan HTML kepada JSX dalam ReactJS

Penerangan Masalah:

Apabila memaparkan data HTML diambil melalui AJAX dalam ReactJS, data sering muncul sebagai teks biasa dan bukannya HTML yang diberikan elemen. Ini disebabkan oleh tingkah laku lalai React yang melarikan diri dari HTML untuk mengelakkan kelemahan skrip merentas tapak.

Penyelesaian:

Untuk menukar rentetan HTML kepada JSX dan memaparkannya sebagai HTML yang diberikan elemen, anda boleh menggunakan harta dangerouslySetInnerHTML. Sifat ini membolehkan anda menetapkan kandungan HTML dalaman bagi sesuatu elemen secara langsung.

Pelaksanaan:

Untuk menggunakan harta dangerouslySetInnerHTML, anda perlu ikat pada objek yang mengandungi kandungan HTML sebagai rentetan. Objek ini harus mempunyai struktur berikut:

{ __html: 'Your HTML content' }

Berikut ialah contoh cara menggunakan harta dangerouslySetInnerHTML dalam ReactJS:

import React, { useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  const handleHtml = (data) => {
    setHtmlContent(data.html);
  };

  return (
    <div>
      <button onClick={() => handleHtml({ html: '<h1>Hello, React!</h1>' })}>Load HTML</button>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

Dalam contoh ini, Harta dangerouslySetInnerHTML digunakan untuk memaparkan kandungan HTML yang diambil daripada fungsi handleHtml sebagai elemen HTML yang diberikan.

Awas:

Menggunakan harta dangerouslySetInnerHTML boleh memperkenalkan risiko keselamatan jika kandungan HTML tidak dibersihkan dengan betul. Sentiasa pastikan kandungan HTML yang anda paparkan adalah selamat dan dipercayai sebelum menggunakan harta ini.

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