Renderizar cadena HTML como HTML real en un componente React

Esto es lo que probé y cómo sale mal.

Esto funciona:

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

Esto no:

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

La propiedad de descripción es solo una cadena normal de contenido HTML. Sin embargo, se representa como una cadena, no como HTML por alguna razón.

¿Alguna sugerencia?

Verifique si el texto que está intentando agregar al nodo no se escapa así:

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

En lugar de esto:

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

si se escapa, debe convertirlo desde el lado del servidor.

El nodo es texto porque se escapó

El nodo es un nodo dom porque no se escapa

¿ this.props.match.descriptionEs una cadena o un objeto? Si es una cadena, debe convertirse a HTML perfectamente. Ejemplo:

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

Sin embargo, si description: <h1 style="color:red;">something</h1>sin las comillas ''vas a obtener:

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

Si es una cadena y no ve ningún marcado HTML, el único problema que veo es un marcado incorrecto.

ACTUALIZAR

Si se trata de títulos HTMLE. Debes decodificarlos antes de enviarlos dangerouslySetInnerHTML, por eso lo llamaron peligrosamente :)

Ejemplo de trabajo:

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

Yo uso 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Fuente en npmjs.com

Levantando el comentario de @ okram para mayor visibilidad:

de su descripción de github: Convierte cadenas HTML directamente en componentes React evitando la necesidad de usar peligrosamente SetInnerHTML de npmjs.com Una utilidad para convertir cadenas HTML en componentes React. Evita el uso de dangerouslySetInnerHTML y convierte elementos HTML estándar, atributos y estilos en línea en sus equivalentes React.

Si tiene control sobre el origen de la cadena que contiene html (es decir, en algún lugar de su aplicación), puede beneficiarse de la nueva <Fragment>API, haciendo 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>
}

Simplemente usa el método peligrosamente SetInnerHTML de React

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

O puede implementar más de esta manera fácil: renderice el HTML sin procesar en la aplicación React

dangerouslySetInnerHTML

dangerouslySetInnerHTML es el reemplazo de React para usar innerHTML en el navegador DOM. En general, establecer HTML a partir del código es arriesgado porque es fácil exponer a sus usuarios inadvertidamente a un ataque de scripting entre sitios (XSS). Por lo tanto, puede configurar HTML directamente desde React, pero debe escribir peligrosamente SetInnerHTML y pasar un objeto con una clave __html, para recordar que es peligroso. Por ejemplo:

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

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

Yo uso innerHTML juntos una referencia para abarcar:

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

En mi caso, utilicé react-render-html

Primero instale el paquete por npm i --save react-render-html

luego,

import renderHTML from 'react-render-html';

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

No pude llegar npm builda trabajar react-html-parser. Sin embargo, en mi caso, pude utilizar con éxito https://reactjs.org/docs/fragments.html . Tenía el requisito de mostrar algunos caracteres HTML Unicode, pero no deberían incrustarse directamente en el JSX. Dentro del JSX, tuvo que ser elegido del estado del Componente. El fragmento de código de componente se proporciona a continuación:

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

yo 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>)

Si tiene control sobre {this.props.match.description} y está utilizando JSX. Yo recomendaría no 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}
);