Reactjs convertir a html

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

Otros Métodos

1. Más fácil - Use Unicode, guarde el archivo como UTF-8 y establezca el charset en UTF-8.

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

2. Safer - Usa 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. Last Resort - Insertar HTML raw usando dangerouslySetInnerHTML.

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

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>

Jsfiddle link

Recomiendo usar Interweavecreado por milesj. Es una biblioteca fenomenal que hace uso de un número si ingeniosas técnicas para analizar e insertar con seguridad HTML en el DOM.

Interweave es una biblioteca de react para renderizar HTML de forma segura, filtrar atributos, texto autowrap con matchers, renderizar caracteres emoji, y mucho más.

• Interweave es una robusta biblioteca de React que puede:
  • Renderizar HTML de forma segura sin usar Peligrosamentetinnerhtml.
  • Elimine de forma segura las etiquetas HTML.
  • XSS automático y protección de inyección.
  • Limpie los atributos HTML usando filtros.
  • Interpolar componentes usando matchers.
  • Autolink URLs, IPs, emails, y hashtags.
  • Renderiza caracteres emoji y 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

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

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