Representación segura de cadenas HTML como HTML

En este escenario, el problema surge al intentar representar una cadena normal de contenido HTML, pero en cambio, aparece como una cadena sin ser interpretado como HTML. Esto suele ocurrir cuando la propiedad que se utiliza en peligrosamenteSetInnerHTML es un objeto en lugar de una cadena.

Para resolver esto, asegúrese de que la propiedad this.props.match.description sea una cadena. Si no es así, conviértalo a HTML antes de asignarlo a la propiedad.

Manejo de entidades HTML

Surgen complicaciones adicionales al tratar con entidades HTML. En tales casos, deberá decodificar las entidades antes de pasarlas a peligrosamenteSetInnerHTML.

Código de ejemplo

Considere el siguiente código de ejemplo:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

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

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

En este ejemplo, la propiedad de descripción contiene entidades HTML (). Para representarlo correctamente, se utiliza la función htmlDecode para decodificar estas entidades antes de pasar el HTML a peligrosamenteSetInnerHTML.