Masukkan HTML dengan React Variable Statement (JSX)

203

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.

— Kyle Hotchkiss
sumber

295

Anda dapat menggunakan SetternerHTML , misalnya

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

— Douglas
sumber

2

Bagaimana cara kerjanya jika Anda perlu menambahkan sesuatu <head>?

— Danielle Madeley

Metode DOM normal di componentDidMount harus bekerja, saya belum pernah melakukannya sebelumnya.

— Douglas

@DanielleMadeley Apakah Anda mencoba memasukkan komentar bersyarat IE ke dalam <head>? Jika demikian, saya telah berhasil menggunakan trik yang dijelaskan di sini: nemisj.com/conditional-ie-comments-in-react-js

— Cam Jackson

3

Pastikan Anda melewati metode ke berbahayaSetInnerHTML dan bukan hash. Menurut dokumen itu, berbahaya untuk melewati hash. Referensi: facebook.github.io/react/tips/dangerously-set-inner-html.html

— criticerz

1

Apakah ada cara tanpa memasukkan div?

— Bung

102

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>
    );
}

— Yo Wakita
sumber

@vsync tidak seharusnya tidak :)

— Artem Bernatskyi

1

apakah mungkin untuk membuat tidak hanya tag html tetapi tag dari perpustakaan seperti tag peringatan bahan ui. saya ingin kode seperti ini

import DOMPurify from 'dompurify'  const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >';   render: function() {     return (         <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>     ); }

— sasha romanov

@ sasharomanov, Apakah Anda mendapatkan solusi untuk skenario ini?

— Nimish goel

51

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 :)

— pengguna2903536
sumber

3

"BerbahayaSetInnerHTML memiliki banyak kelemahan karena diatur di dalam tag." Bisakah Anda menjelaskan lebih lanjut tentang ini? Mencoba untuk memikirkan perbedaan mendasar apa yang ada antara html-react-parser dan sanherstedHtml

— dchhetri

Tampaknya html-react-parser tidak membersihkan input - lihat FAQ

— Little Brain

28

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

— iamnotbatma
sumber

14

Pada mulanya saya tertawa dan kemudian memberikannya kesempatan yang mengejutkan saya

— M pada

1

Sejauh ini jawaban yang paling sederhana terutama jika HTML ditulis oleh Anda dan dinamis berdasarkan input pengguna. Anda dapat secara harfiah mengatur var myHtml = Beberapa teks ; dan itu bekerja

— pat8719

1

Ini jawaban terbaik. Terima kasih kawan!

— Andy Mercer

3

Untuk menghindari kesalahan linter, saya menggunakannya seperti ini:

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

— Tudor Morar
sumber

3

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 -

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

— Amandeep Singh Ghai
sumber

2

Ini tidak menjawab pertanyaan. Konten thisIsMyCopyitu sendiri JSX, bukan string HTML. Jadi Anda benar-benar menempelkan JSX ke dalam BEJ.

— Antares42

Anda dapat menemukan Fragmen di Preact juga tetapi hanya di versi X dan seterusnya.

— Nasia Makrygianni

-3

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>
    )
}

— Harry
sumber

2

dan jika Anda ingin variabel di dalam string Anda, Anda harus membungkus masing-masing {}dan seluruh string dalam beberapa markup seperti itu({telephoneNumber} {email})

— DanV

2

Ini berbeda dari apa yang ditanyakan dalam pertanyaan. Dalam pertanyaannya copy copy copy strong copyadalah string. Anda memilikinya sebagai BEJ.

— YPCrumble

4

Itu bukan ES6, tapi JSX

— gztomas

-3

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.

— Padang rumput
sumber