Reactjs converter html string para jsx

Estou tendo problemas para lidar com o ReactJS do facebook. Sempre que faço o ajax e quero exibir dados html, o ReactJS os exibe como texto. (Veja a figura abaixo)

Os dados são exibidos através da função de retorno de chamada de sucesso do jquery Ajax.

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

Existe alguma maneira fácil de converter isso em html? Como devo fazer isso usando o ReactJS?

Por padrão, o React escapa o HTML para impedir o XSS (script entre sites) . Se você realmente deseja renderizar HTML, pode usar a dangerouslySetInnerHTMLpropriedade:

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

A reação força essa sintaxe intencionalmente complicada, para que você não renderize acidentalmente o texto como HTML e introduza erros XSS.

Agora existem métodos mais seguros para fazer isso. Os documentos foram atualizados com esses métodos.

Outros métodos

1. Mais fácil - use Unicode, salve o arquivo como UTF-8 e defina-o charsetcomo UTF-8.

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

2. Mais seguro - use o número Unicode da entidade dentro de uma string Javascript.

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

   ou

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

3. Ou uma matriz mista com strings e elementos JSX.

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

4. Último recurso - insira HTML bruto usando dangerouslySetInnerHTML.

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

Eu recomendo usar o Interweave criado por milesj . É uma biblioteca fenomenal que utiliza um número de técnicas engenhosas para analisar e inserir HTML com segurança no DOM.

O Interweave é uma biblioteca de reação para renderizar HTML com segurança, filtrar atributos, copiar automaticamente texto com correspondências, renderizar caracteres emoji e muito mais.

• O Interweave é uma biblioteca robusta do React que pode:
  • Renderize HTML com segurança sem usar o DangerouslySetInnerHTML.
  • Retire com segurança as tags HTML.
  • Proteção automática contra XSS e injeção.
  • Limpe os atributos HTML usando filtros.
  • Interpole componentes usando matchers.
  • URLs, IPs, emails e hashtags de link automático.
  • Renderize caracteres Emoji e emoticon.
  • E muito mais!

Exemplo 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>

Eu encontrei este violino js. isso funciona assim

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>

ligação jsfiddle

Você também pode usar Parser () em html-react-parser. Eu usei o mesmo. Link compartilhado.

eu começo a usar o pacote npm chamado react-html-parser

Para aqueles que ainda estão experimentando, o npm install react-html-parser

Quando eu instalei, ele tinha 123628 downloads semanais.

import ReactHtmlParser from 'react-html-parser'

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

Você pode usar o seguinte se quiser renderizar html bruto no React

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

Exemplo - Renderizar

O teste é um bom dia