Renderização segura de strings HTML como HTML

Nesse cenário, o problema surge ao tentar renderizar uma string normal de conteúdo HTML, mas em vez disso, aparece como uma string sem ser interpretada como HTML. Isso normalmente é encontrado quando a propriedade usada em perigosalySetInnerHTML é um objeto em vez de uma string.

Para resolver isso, certifique-se de que a propriedade this.props.match.description seja uma string. Caso contrário, converta-o para HTML antes de atribuí-lo à propriedade.

Tratamento de entidades HTML

Surgem complicações adicionais ao lidar com entidades HTML. Nesses casos, você precisará decodificar as entidades antes de passá-las para perigosamenteSetInnerHTML.

Código de exemplo

Considere o seguinte código de exemplo:

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

Neste exemplo, a propriedade description contém entidades HTML (). Para renderizá-lo corretamente, a função htmlDecode é usada para decodificar essas entidades antes de passar o HTML para perigosamenteSetInnerHTML.