Reactjs convierte cadenas html a jsx

Tengo problemas para lidiar con ReactJS de Facebook. Cada vez que hago ajax y quiero mostrar datos html, ReactJS lo muestra como texto. (Ver figura a continuación)

Los datos se muestran a través de la función de devolución de llamada correcta de jquery Ajax.

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

¿Hay alguna manera fácil de convertir esto en html? ¿Cómo debo hacerlo usando ReactJS?

De forma predeterminada, React escapa del HTML para evitar XSS (secuencias de comandos entre sitios) . Si realmente quiere renderizar HTML, puede usar la dangerouslySetInnerHTMLpropiedad:

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

React fuerza esta sintaxis intencionalmente engorrosa para que no represente accidentalmente texto como HTML e introduzca errores XSS.

Ahora hay métodos más seguros para lograr esto. Los documentos se han actualizado con estos métodos.

Otros metodos

1. Más fácil : use Unicode, guarde el archivo como UTF-8 y charsetconfigúrelo como UTF-8.

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

2. Más seguro : use el número Unicode para la entidad dentro de una cadena Javascript.

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

   o

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

3. O una matriz mixta con cadenas y elementos JSX.

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

4. Último recurso : inserte HTML sin formato utilizando dangerouslySetInnerHTML.

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

Recomiendo usar Interweave creado por milesj . Es una biblioteca fenomenal que hace uso de un número de técnicas ingeniosas para analizar e insertar HTML de forma segura en el DOM.

Interweave es una biblioteca de reacción para renderizar HTML de forma segura, filtrar atributos, ajustar automáticamente el texto con matchers, renderizar caracteres emoji y mucho más.

• Interweave es una biblioteca robusta de React que puede:
  • Renderice HTML de forma segura sin utilizar peligrosamente SetInnerHTML.
  • Tira de forma segura las etiquetas HTML.
  • Protección automática XSS e inyección.
  • Limpie los atributos HTML utilizando filtros.
  • Interpolar componentes usando matchers.
  • Enlace automático de URL, IP, correos electrónicos y hashtags.
  • Render Emoji y personajes de emoticonos.
  • ¡Y mucho más!

Ejemplo de uso:

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>

Encontré este violín js. esto funciona así

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>

enlace jsfiddle

También puede usar Parser () desde html-react-parser. Yo he usado lo mismo. Enlace compartido.

empiezo a usar el paquete npm llamado react-html-parser

Para aquellos que todavía están experimentando, npm install react-html-parser

Cuando lo instalé tenía 123628 descargas semanales.

import ReactHtmlParser from 'react-html-parser'

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

Puede usar lo siguiente si desea renderizar html sin procesar en React

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

Ejemplo: renderizar

La prueba es un buen día