javascript - helmet - Reactjs convierte a html

react meta tags

Question

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

Los datos se muestran a través de la función de devolución exitosa 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 debería hacerlo usando ReactJS?

Answer 1

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 configure el juego de charset en UTF-8.

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

2. Más seguro : use el número Unicode para la entidad dentro de una cadena de 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 procesar usando dangerouslySetInnerHTML .

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

Answer 2

De forma predeterminada, React escapa del HTML para evitar XSS. Si realmente quieres renderizar HTML, puedes usar la propiedad dangerouslySetInnerHTML :

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

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

Answer 3

Encontré este js violín. 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

Answer 4

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

Interweave es una biblioteca de reacción para generar de forma segura HTML, atributos de filtro, texto de envoltura automática con mezcladores, caracteres de emoticones de renderizado y mucho más.

• Interweave es una robusta biblioteca de React que puede:
  • Render de forma segura HTML sin utilizar peligrosamente SetInnerHTML.
  • Quitar de forma segura las etiquetas HTML.
  • Protección XSS y inyección automática.
  • Limpia los atributos de HTML usando filtros.
  • Interpola los componentes usando Matchers.
  • Autolink URLs, IPs, correos electrónicos y hashtags.
  • Renderizar Emoji y personajes de emoticones.
  • ¡Y mucho más!

Answer 5

También puede usar Parser () desde html-react-parser. He usado lo mismo. Link compartido.