¿Cómo representar una cadena HTML como HTML real?

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 simplemente una cadena normal de contenido HTML. Sin embargo, por alguna razón se representa como una cadena, no como HTML.

ingrese la descripción de la imagen aquí

¿Alguna sugerencia?

Sep 29 '16 04:09 Sergio Tapia

¿ Es this.props.match.descriptionuna cuerda o un objeto? Si es una cadena, debería convertirse a HTML sin problemas. 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 la descripción <h1 style="color:red;">something</h1>no incluye las comillas '', obtendrá:

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 el marcado incorrecto.

ACTUALIZAR

Si está tratando con entidades HTML, debe decodificarlas antes de enviarlas, por dangerouslySetInnerHTMLeso se llama "peligrosamente" :)

Ejemplo de trabajo:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

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

Sep 28 '2016 22:09 Ilanus

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 peligrosamenteSetInnerHTML de npmjs.com Una utilidad para convertir cadenas HTML en componentes React. Evita el uso de peligrosamenteSetInnerHTML y convierte elementos, atributos y estilos en línea HTML estándar en sus equivalentes de React.

Apr 27 '2019 19:04 pixelearth

Compruebe si el texto que está intentando agregar al nodo no tiene un formato de escape como este:

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

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 ha escapado.

El nodo es un nodo dom porque no tiene escape.

Sep 28 '2016 23:09 Sergio Flores