Reactjs convierte cadenas html a jsx

212

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)

Cadena de procesamiento ReactJS

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

ingrese la descripción de la imagen aquí

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

Peter Wateber
fuente

Respuestas:

406

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.

Sophie Alpert
fuente
44
Esta sintaxis se muestra en la página de inicio y en el tutorial, pero me di cuenta de que no está documentada en ningún otro lugar, así que archivé el número 413 para corregirlo.
Sophie Alpert
¡Correcto! Ya lo resolví usando dangerouslySetInnerHTML pero gracias :)
Peter Wateber
Vale la pena jugar con seguridad para desinfectar el contenido utilizando la sanitizefunción del dompurifypaquete npm si obtiene esa información de una API externa.
Barry Michael Doyle
77

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

Brett DeWoody
fuente
15
¿He preparado la documentación pero sobre una cadena HTML larga como una de un editor WYSIWYG? No puedo ver cómo podemos usar el primer, segundo o tercer método
ericn
44
Estoy de acuerdo con @eric. ¿De qué sirven los métodos 1-3 para el contenido ya escapado almacenado en algún lugar, por ejemplo, un DB? También tenga en cuenta que el método 4, el único método, significa que no puede agregar nodos secundarios.
dvdplm
14
Sip. Estos ejemplos con contenido "dinámico" codificado no tienen mucho sentido.
regularmike
Este es mi innerHTML - "Mostrar administradores \ u003cb \ u003e1 \ u0026nbsp; - \ u0026nbsp; 10 \ u003c / b \ u003e de \ u003cb \ u003e13 \ u003c / b \ u003e en total" mientras esto es lo que se está representando - "Mostrar admins <b> 1 & nbsp; - & nbsp; 10 </b> de <b> 13 </b> en total ". Cuando trato de usar peligrosamenteSetInnerHTML, todo se rompe.
vipin8169
36

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
Arman Nisch
fuente
¿Podría proporcionar un ejemplo de uso por favor?
El Anónimo el
1
@ElAnonimo He agregado un ejemplo de uso. Espero que las cosas sean un poco más claras.
Arman Nisch
1
Un millón de gracias, entretejer es exactamente lo que necesitaba. Salud.
Nicholas Hamilton
1
La documentación para esto no es útil. También probé con pocas líneas de html y tenía una página llena de mensajes de error. ¿Alguien tiene ejemplos o recursos con documentación?
Tarun Kolla el
8
npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>
Donatas Kuskys
fuente
6

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

Hassan Gilak
fuente
Lamentablemente, el documento no funciona en la representación del servidor.
Laurent Van Winckel
Podría hacerlo si haces import JSDOM from 'jsdom'; global.window = new JSDOM('', { url: 'http://localhost' }); global.document = global.window.document;buena suerte
Coty Embry
2

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

Abhra Dey
fuente
2

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

Dayan
fuente
1

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>
letele
fuente
0

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

Panayiotis Georgiou
fuente