Reactjs mengonversi string html ke jsx

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)

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

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

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.

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'}} />

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

npm i html-react-parser;

import Parser from 'html-react-parser';

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

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

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

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

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>

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