Reactjs mengonversi string html ke jsx


212

Saya mengalami kesulitan berurusan dengan ReactJS facebook. Setiap kali saya melakukan ajax dan ingin menampilkan data html, ReactJS menampilkannya sebagai teks. (Lihat gambar di bawah)

ReactJS membuat string

Data ditampilkan melalui fungsi panggilan balik sukses dari jquery Ajax.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

masukkan deskripsi gambar di sini

Apakah ada cara mudah untuk mengubahnya menjadi html? Bagaimana saya harus melakukannya menggunakan ReactJS?

Jawaban:


406

Secara default, React keluar dari HTML untuk mencegah XSS (Cross-site scripting) . Jika Anda benar-benar ingin merender HTML, Anda dapat menggunakan dangerouslySetInnerHTMLproperti:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

Bereaksi memaksa sintaks yang tidak praktis ini rumit sehingga Anda tidak sengaja membuat teks sebagai HTML dan memperkenalkan bug XSS.


4
Sintaks ini ditampilkan di beranda dan di tutorial, tapi saya baru sadar itu tidak didokumentasikan di tempat lain jadi saya hanya mengajukan # 413 untuk memperbaikinya.
Sophie Alpert

Benar! Saya sudah memecahkan ini sudah menggunakan berbahayaSetInnerHTML tapi terima kasih :)
Peter Wateber

Layak bermain aman untuk membersihkan konten menggunakan sanitizefungsi dari dompurifypaket npm jika Anda mendapatkan informasi itu dari API eksternal.
Barry Michael Doyle

77

Sekarang ada metode yang lebih aman untuk mencapai ini. The docs telah diperbarui dengan metode ini.

Metode Lainnya

  1. Paling mudah - Gunakan Unicode, simpan file sebagai UTF-8 dan atur charsetke UTF-8.

    <div>{'First · Second'}</div>

  2. Aman - Gunakan nomor Unicode untuk entitas di dalam string Javascript.

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

    atau

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

  3. Atau array campuran dengan elemen string dan JSX.

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

  4. Last Resort - Masukkan HTML mentah menggunakan dangerouslySetInnerHTML.

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


15
Saya sudah siap dokumentasi tetapi tentang string HTML panjang seperti satu dari editor WYSIWYG? Saya tidak dapat melihat bagaimana kita dapat menggunakan metode 1, 2 atau 3
ericn

4
Saya setuju dengan @eric. Apa gunanya metode 1-3 untuk konten yang sudah lolos disimpan di suatu tempat, misalnya DB? Perhatikan juga bahwa metode 4 - satu-satunya metode - berarti Anda tidak dapat menambahkan simpul anak.
dvdplm

14
Ya. Contoh-contoh ini dengan konten "dinamis" yang dikodekan tidak masuk akal.
regularmike

Ini adalah innerHTML saya - "Menampilkan admin \ u003cb \ u003e1 \ u0026nbsp; - \ u0026nbsp; 10 \ u003c / b \ u003e dari \ u003cb \ u003e13 \ u003c / b \ u003e total" saat ini yang sedang dirender - Menampilkan "- menampilkan" admin <b> 1 & nbsp; - & nbsp; 10 </b> dari total <b> 13 </b> ". Ketika saya mencoba menggunakan berbahayaSetInnerHTML, evrything rusak.
vipin8169

36

Saya sarankan menggunakan Pelapis diciptakan oleh milesj . Ini adalah perpustakaan yang fenomenal yang menggunakan angka jika teknik cerdik untuk mengurai dan memasukkan HTML dengan aman ke DOM.

Interweave adalah pustaka reaksi untuk merender HTML dengan aman, atribut filter, teks autowrap dengan korek api, render karakter emoji, dan banyak lagi.

  • Interweave adalah React library yang kuat yang dapat:
    • Membuat HTML dengan aman tanpa menggunakan hazardSetInnerHTML.
    • Lepas tag HTML dengan aman.
    • XSS otomatis dan perlindungan injeksi.
    • Bersihkan atribut HTML menggunakan filter.
    • Komponen interpolasi menggunakan pencocokan.
    • URL tautan otomatis, IP, email, dan tagar.
    • Render Emoji dan karakter emotikon.
    • Dan banyak lagi!

Contoh Penggunaan:

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave

Bisakah Anda memberikan contoh penggunaan?
El Anonimo

1
@ Elonnonimo Saya telah menambahkan contoh penggunaan. Harapan yang membuat segalanya sedikit lebih jelas.
Arman Nisch

1
Terima kasih satu juta, menjalin apa yang saya butuhkan. Bersulang.
Nicholas Hamilton

1
Dokumentasi untuk ini tidak membantu. Saya juga mencoba dengan beberapa baris html dan saya memiliki halaman yang penuh dengan pesan kesalahan. Apakah seseorang memiliki contoh atau sumber daya apa pun dengan dokumentasi?
Tarun Kolla

8
npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

6

Saya menemukan biola ini. ini berfungsi seperti ini

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

tautan jsfiddle


Sayangnya dokumen tidak berfungsi pada rendering server.
Laurent Van Winckel

Mungkin jika Anda melakukan import JSDOM from 'jsdom'; global.window = new JSDOM('', { url: 'http://localhost' }); global.document = global.window.document;idk goodluck
Coty Embry

2

Anda juga dapat menggunakan Parser () dari html-react-parser. Saya telah menggunakan yang sama. Tautan dibagikan.


2

saya mulai menggunakan paket npm yang disebut react-html-parser


1

Bagi yang masih bereksperimen, npm instal react-html-parser

Ketika saya menginstalnya ia memiliki unduhan 123628 mingguan.

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

0

Anda dapat menggunakan yang berikut jika Anda ingin membuat html mentah di Bereaksi

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

Contoh - Memberikan

Tes adalah hari yang baik

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.