Masukkan HTML dengan React Variable Statement (JSX)

Saya sedang membangun sesuatu dengan React di mana saya harus memasukkan HTML dengan React Variables di JSX. Apakah ada cara untuk memiliki variabel seperti:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

dan memasukkannya ke dalam reaksi seperti itu, dan membuatnya bekerja?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

dan sudahkah memasukkan HTML seperti yang diharapkan? Saya belum melihat atau mendengar apa pun tentang fungsi reaksi yang dapat melakukan inline ini, atau metode mengurai hal-hal yang memungkinkan ini berfungsi.

Anda dapat menggunakan SetternerHTML , misalnya

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

Catatan yang dangerouslySetInnerHTMLbisa berbahaya jika Anda tidak tahu apa yang ada di string HTML yang Anda suntikkan.Ini karena kode sisi klien jahat dapat disuntikkan melalui tag skrip.

Mungkin ide yang baik untuk membersihkan string HTML melalui utilitas seperti DOMPurify jika Anda tidak 100% yakin HTML yang Anda render adalah XSS (cross-site scripting) aman.

Contoh:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

hazardouslySetInnerHTML memiliki banyak kelemahan karena diatur di dalam tag.

Saya sarankan Anda untuk menggunakan beberapa wrapper reaksi seperti yang saya temukan di sini pada npm untuk tujuan ini. html-react-parser melakukan pekerjaan yang sama.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Sangat sederhana :)

Dengan menggunakan ''Anda membuatnya ke string. Gunakan tanpa koma terbalik itu akan berfungsi dengan baik.

Untuk menghindari kesalahan linter, saya menggunakannya seperti ini:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

Dengan menggunakan '' set nilai ke string dan Bereaksi tidak memiliki cara untuk mengetahui bahwa itu adalah elemen HTML. Anda dapat melakukan yang berikut untuk memberi tahu React bahwa itu adalah elemen HTML -

1. Hapus ''dan itu akan berhasil
2. Gunakan <Fragment>untuk mengembalikan elemen HTML.

Jika ada orang lain yang masih mendarat di sini. Dengan ES6 Anda dapat membuat variabel html seperti:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

Anda juga dapat memasukkan HTML ini di ReactDOM seperti ini:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Berikut adalah dua tautan tautan dan tautan2 dari Bereaksi dokumentasi yang dapat membantu.