Comment restituer correctement les chaînes HTML dans React ?

Rendu des chaînes HTML en HTML réel

Lorsque vous tentez d'afficher du contenu HTML en HTML réel, certains scénarios peuvent conduire à des résultats inattendus où la chaîne est rendu sous forme de texte plutôt qu'interprété comme HTML. Pour résoudre ce problème, il est crucial de s'assurer que la chaîne HTML est placée entre guillemets doubles et décodée si nécessaire.

Une approche pour résoudre ce problème consiste à placer la chaîne HTML entre guillemets doubles dans la propriété dangereusementSetInnerHTML, comme démontré dans l'exemple suivant :

<div dangerouslySetInnerHTML={{ __html: '" <h1>Hi there!</h1>" ' }} />

Cependant, si la chaîne HTML est stockée en tant qu'objet, elle ne sera pas rendue au format HTML. Dans de tels cas, l'objet doit être transformé en chaîne avant d'être attribué à dangereusementSetInnerHTML.

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

De plus, lorsqu'il s'agit d'entités HTML au sein de la chaîne HTML, il est essentiel de les décoder avant de les attribuer à dangereusementSetInnerHTML. . Ceci peut être réalisé en utilisant la fonction htmlDecode :

class App extends React.Component {

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

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

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

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!