Renderizar string HTML como HTML real em um componente React

Aqui está o que eu tentei e como dá errado.

Isso funciona:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Isto não:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

A propriedade description é apenas uma sequência normal de conteúdo HTML. No entanto, é renderizado como uma sequência, não como HTML por algum motivo.

Alguma sugestão?

Verifique se o texto que você está tentando anexar ao nó não é escapado assim:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Em vez disso:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

se for escapado, você deve convertê-lo do seu lado do servidor.

O nó é texto porque escapou

O nó é um nó dom porque não é escapado

Será que this.props.match.descriptioné uma string ou um objeto? Se for uma string, ela deve ser convertida para HTML muito bem. Exemplo:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Resultado: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

No entanto, se description: <h1 style="color:red;">something</h1>sem as aspas ''você receberá:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Se é uma string e você não vê nenhuma marcação HTML, o único problema que vejo é a marcação errada.

ATUALIZAR

Se você está lidando com HTMLEntitles. Você precisa decodificá-los antes de enviá-los paradangerouslySetInnerHTML isso é que eles chamam perigosamente :)

Exemplo de trabalho:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Eu uso 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Fonte no npmjs.com

Levantando o comentário do @ okram para obter mais visibilidade:

a partir de sua descrição do github: converte seqüências de caracteres HTML diretamente em componentes do React, evitando a necessidade de usar o DangerouslySetInnerHTML de npmjs.com Um utilitário para converter seqüências de caracteres HTML em componentes do React. Evita o uso de DangerouslySetInnerHTML e converte elementos HTML padrão, atributos e estilos embutidos em seus equivalentes React.

Se você tem controle sobre a origem da string que contém html (ou seja, em algum lugar do seu aplicativo), pode se beneficiar da nova <Fragment>API, fazendo algo como:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

Você apenas usa o método DangerouslySetInnerHTML de React

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Ou você pode implementar mais com essa maneira fácil: renderize o HTML bruto no aplicativo React

dangerouslySetInnerHTML

dangerouslySetInnerHTML é o substituto do React para o uso do innerHTML no DOM do navegador. Em geral, definir HTML a partir do código é arriscado, pois é fácil expor inadvertidamente seus usuários a um ataque de XSS (cross-site scripting). Portanto, você pode definir o HTML diretamente do React, mas precisa digitar perigosamente o SetInnerHTML e passar um objeto com uma chave __html, para se lembrar de que é perigoso. Por exemplo:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Eu uso innerHTML juntos uma ref para abranger:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

No meu caso, usei react-render-html

Primeiro instale o pacote npm i --save react-render-html

então,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Não consegui npm buildtrabalhar react-html-parser. No entanto, no meu caso, consegui usar o https://reactjs.org/docs/fragments.html . Eu tinha um requisito para mostrar alguns caracteres unicode html, mas eles não deveriam ser incorporados diretamente no JSX. Dentro do JSX, ele teve que ser escolhido no estado do Componente. O snippet de código do componente é fornecido abaixo:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

eu uso https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Se você tiver controle para {this.props.match.description} e se estiver usando JSX. Eu recomendaria não usar "dangerouslySetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);