Rendre la chaîne HTML dans React

Rana Hasnain Khan 15 février 2024

React React Render

Nous présenterons comment rendre une chaîne HTML et rendre une chaîne HTML échappée dans React.

Rendre la chaîne HTML dans React

Lorsque nous travaillons sur un site Web à grande échelle, nous devons réutiliser les composants HTML. Ou, lorsque vous travaillez avec des réponses JSON en HTML, nous devons rendre les chaînes HTML dans React.

Prenons un exemple et rendons une chaîne HTML normale. Premièrement, nous allons créer un div avec un identifiant root.

# react
<div id="root"></div>

Ensuite, rendons la chaîne HTML à root.

# react
class App extends React.Component {

constructor() {
    super();
    this.state = {
      TextRender: '<h1>This is a heading</h1><p> This is a paragraph.</p>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.TextRender }} />
    );
  }
}

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

Production :

rendre la chaîne html en React

Dans l’exemple ci-dessus, nous avons rendu une chaîne HTML. Mais si nous essayons de rendre une chaîne HTML échappée, cela donnera une erreur.

Essayons de rendre une chaîne HTML échappée.

# react
class App extends React.Component {

constructor() {
    super();
    this.state = {
      TextRender: '&lt;h1&gt;This is a heading&lt;/h1&gt;&lt;p&gt; This is a paragraph.&lt;/p&gt;'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.TextRender }} />
    );
  }
}

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

Production :

rendre la chaîne html échappée en React

Comme vous le remarquez dans l’exemple ci-dessus, les balises HTML ne sont pas rendues correctement en raison de la chaîne HTML échappée.

Maintenant, nous allons créer une fonction DecodeHtml pour convertir la chaîne HTML échappée en une chaîne HTML normale.

# react
DecodeHtml(input){
    var a = document.createElement('div');
    a.innerHTML = input;
    return a.childNodes.length === 0 ? "" : a.childNodes[0].nodeValue;
  }

Ainsi, le code devrait ressembler à ceci.

# react
class App extends React.Component {

constructor() {
    super();
    this.state = {
      TextRender: '&lt;h1&gt;This is a heading&lt;/h1&gt;&lt;p&gt; This is a paragraph.&lt;/p&gt;'
    }
  }
  htmlDecode(input){
    var a = document.createElement('div');
    a.innerHTML = input;
    return a.childNodes.length === 0 ? "" : a.childNodes[0].nodeValue;
  }

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

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

La sortie devrait ressembler à ceci.

Production :

rendre la fonction de chaîne html échappée dans React

De cette façon, nous pouvons facilement rendre les chaînes HTML échappées.

Auteur: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Rendre la chaîne HTML dans React

Article connexe - React Render