Rendu en toute sécurité des chaînes HTML au format HTML

Dans ce scénario, le problème survient lors de la tentative de rendu d'une chaîne normale de contenu HTML, mais il apparaît à la place sous forme de chaîne sans être interprété comme du HTML. Cela se produit généralement lorsque la propriété utilisée dans DangerlySetInnerHTML est un objet plutôt qu'une chaîne.

Pour résoudre ce problème, assurez-vous que la propriété this.props.match.description est une chaîne. Si ce n'est pas le cas, convertissez-le en HTML avant de l'attribuer à la propriété.

Gestion des entités HTML

Des complications supplémentaires surviennent lors du traitement des entités HTML. Dans de tels cas, vous devrez décoder les entités avant de les transmettre à dangereusementSetInnerHTML.

Exemple de code

Considérez l'exemple de code suivant :

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

Dans cet exemple, la propriété description contient des entités HTML (). Pour le restituer correctement, la fonction htmlDecode est utilisée pour décoder ces entités avant de transmettre le HTML à dangereusementSetInnerHTML.