Comment restituer en toute sécurité des chaînes HTML dans React en utilisant dangereusementSetInnerHTML ?

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: '<p><strong>Our Opportunity:</strong></p>',
    };
  }

  htmlDecode(input) {
    const 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'));

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!