Rendre la chaîne HTML en tant que vrai HTML dans un composant React

Voici ce que j'ai essayé et comment ça va mal.

Cela marche:

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

Cela ne:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

La propriété description est simplement une chaîne normale de contenu HTML. Cependant, il est rendu sous forme de chaîne et non de HTML pour une raison quelconque.

Aucune suggestion?

Vérifiez si le texte que vous essayez d'ajouter au nœud n'est pas échappé comme ceci:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Au lieu de cela:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

si est échappé, vous devez le convertir depuis votre serveur.

Le nœud est du texte car il est échappé

Le nœud est un nœud dom car il n'est pas échappé

Est this.props.match.description-ce qu'une chaîne ou un objet? S'il s'agit d'une chaîne, elle doit être convertie en HTML très bien. Exemple:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

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

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

Résultat: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Cependant, si description: <h1 style="color:red;">something</h1>sans les citations, ''vous obtiendrez:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

S'il s'agit d'une chaîne et que vous ne voyez aucun balisage HTML, le seul problème que je vois est un balisage incorrect.

METTRE À JOUR

Si vous traitez avec HTMLEntitles. Vous devez les décoder avant de les envoyer, dangerouslySetInnerHTMLc'est pourquoi ils l'ont appelé dangereusement :)

Exemple de travail:

class App extends React.Component {

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

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

J'utilise 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

Source sur npmjs.com

Soulevez le commentaire de @ okram pour plus de visibilité:

à partir de sa description github: convertit les chaînes HTML directement en composants React évitant d'avoir à utiliser dangerouslySetInnerHTML de npmjs.com Un utilitaire pour convertir des chaînes HTML en composants React. Évite l'utilisation de dangerouslySetInnerHTML et convertit les éléments HTML standard, les attributs et les styles en ligne en leurs équivalents React.

Si vous avez le contrôle sur la provenance de la chaîne contenant le HTML (c'est-à-dire quelque part dans votre application), vous pouvez bénéficier de la nouvelle <Fragment>API, en faisant quelque chose comme:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

Vous utilisez simplement la méthode dangerouslySetInnerHTML de React

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Ou vous pouvez en implémenter plus avec cette méthode simple: Rendre le HTML brut dans l'application React

dangereusementSetInnerHTML

dangerouslySetInnerHTML est le remplacement de React pour l'utilisation de innerHTML dans le DOM du navigateur. En général, définir du code HTML à partir du code est risqué car il est facile d'exposer par inadvertance vos utilisateurs à une attaque de script intersite (XSS). Ainsi, vous pouvez définir HTML directement à partir de React, mais vous devez taper dangerouslySetInnerHTML et passer un objet avec une clé __html, pour vous rappeler que c'est dangereux. Par exemple:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

J'utilise innerHTML avec une référence pour couvrir:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Dans mon cas, j'ai utilisé react-render-html

Installez d'abord le package en npm i --save react-render-html

puis,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Je n'ai pas pu npm buildtravailler avec react-html-parser. Cependant, dans mon cas, j'ai pu utiliser avec succès https://reactjs.org/docs/fragments.html . J'avais besoin d'afficher quelques caractères unicode html, mais ils ne devraient pas être directement intégrés dans le JSX. Dans le JSX, il devait être sélectionné dans l'état du composant. L'extrait de code du composant est donné ci-dessous:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

j'utilise https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Si vous avez le contrôle sur {this.props.match.description} et si vous utilisez JSX. Je recommanderais de ne pas utiliser "dangerouslySetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);