Reactjs converte la stringa html in jsx

Ho problemi a gestire ReactJS di Facebook. Ogni volta che faccio Ajax e voglio visualizzare un dato HTML, ReactJS lo visualizza come testo. (Vedi figura sotto)

I dati vengono visualizzati tramite la funzione di callback riuscita di jquery Ajax.

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

C'è un modo semplice per convertire questo in HTML? Come dovrei farlo usando ReactJS?

Per impostazione predefinita, React esegue l'escape dell'HTML per impedire XSS (cross-site scripting) . Se vuoi veramente rendere l'HTML, puoi usare la dangerouslySetInnerHTMLproprietà:

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

React impone questa sintassi volutamente ingombrante in modo da non rendere accidentalmente il testo come HTML e introdurre bug XSS.

Ora ci sono metodi più sicuri per raggiungere questo obiettivo. I documenti sono stati aggiornati con questi metodi.

Altri metodi

1. Più semplice : utilizzare Unicode, salvare il file come UTF-8 e impostare charsetUTF-8.

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

2. Più sicuro : utilizzare il numero Unicode per l'entità all'interno di una stringa Javascript.

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

   o

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

3. O un array misto con stringhe ed elementi JSX.

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

4. Last Resort : inserisci HTML non elaborato utilizzando dangerouslySetInnerHTML.

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

Consiglio di usare Interweave creato da milesj . È una libreria fenomenale che utilizza un numero se tecniche ingegnose per analizzare e inserire in modo sicuro HTML nel DOM.

Interweave è una libreria di reazioni per il rendering HTML, gli attributi di filtro, il testo automatico con gli abbinamenti, il rendering di caratteri emoji e molto altro.

• Interweave è una solida libreria di React che può:
  • Esegui il rendering HTML in modo sicuro senza usare pericolosamenteSetInnerHTML.
  • Spoglia in modo sicuro i tag HTML.
  • Protezione automatica XSS e iniezione.
  • Pulisci gli attributi HTML usando i filtri.
  • Interpolare i componenti utilizzando i corrispondenti.
  • Collegamento automatico di URL, IP, e-mail e hashtag.
  • Rendering di personaggi Emoji ed emoticon.
  • E altro ancora!

Esempio di utilizzo:

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>

ho trovato questo violino js. funziona così

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>

collegamento jsfiddle

Puoi anche usare Parser () da html-reazioni-parser. Ho usato lo stesso. Link condiviso.

comincio a usare il pacchetto npm chiamato reazioni-html-parser

Per coloro che stanno ancora sperimentando, npm installa React-html-parser

Quando l'ho installato ha avuto 123628 download settimanali.

import ReactHtmlParser from 'react-html-parser'

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

È possibile utilizzare quanto segue se si desidera eseguire il rendering di HTML html in React

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

Esempio: rendering

Il test è una buona giornata