Reactjs convertit une chaîne html en jsx

J'ai du mal à gérer le ReactJS de Facebook. Chaque fois que je fais ajax et que je veux afficher des données html, ReactJS les affiche sous forme de texte. (Voir figure ci-dessous)

Les données sont affichées via la fonction de rappel de réussite du jquery Ajax.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

Existe-t-il un moyen simple de convertir cela en html? Comment dois-je le faire en utilisant ReactJS?

Par défaut, React échappe au HTML pour empêcher XSS (Cross-site scripting) . Si vous voulez vraiment rendre le HTML, vous pouvez utiliser la dangerouslySetInnerHTMLpropriété:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

React force cette syntaxe intentionnellement lourde afin que vous ne rendiez pas accidentellement du texte au format HTML et n'introduisiez pas de bogues XSS.

Il existe désormais des méthodes plus sûres pour y parvenir. Les documents ont été mis à jour avec ces méthodes.

Autres méthodes

1. Le plus simple : utilisez Unicode, enregistrez le fichier au format UTF-8 et réglez-le charsetsur UTF-8.

   <div>{'First · Second'}</div>

2. Plus sûr - Utilisez le numéro Unicode pour l'entité à l'intérieur d'une chaîne Javascript.

   <div>{'First \u00b7 Second'}</div>

   ou

   <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

3. Ou un tableau mixte avec des chaînes et des éléments JSX.

   <div>{['First ', <span>&middot;</span>, ' Second']}</div>

4. Last Resort - Insérez du HTML brut à l'aide de dangerouslySetInnerHTML.

   <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

Je recommande d'utiliser Interweave créé par milesj . C'est une bibliothèque phénoménale qui utilise un certain nombre de techniques ingénieuses pour analyser et insérer en toute sécurité du HTML dans le DOM.

Interweave est une bibliothèque React pour rendre en toute sécurité le HTML, filtrer les attributs, envelopper automatiquement le texte avec des égaliseurs, rendre les caractères emoji et bien plus encore.

• Interweave est une bibliothèque React robuste qui peut:
  • Rendre HTML en toute sécurité sans utiliser dangerouslySetInnerHTML.
  • Supprimez les balises HTML en toute sécurité.
  • Protection automatique XSS et injection.
  • Nettoyez les attributs HTML à l'aide de filtres.
  • Interpoler les composants à l'aide d'apparieurs.
  • Lier automatiquement les URL, IP, e-mails et hashtags.
  • Rendre les caractères Emoji et émoticônes.
  • Et beaucoup plus!

Exemple d'utilisation:

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

j'ai trouvé ce violon js. cela fonctionne comme ça

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

lien jsfiddle

Vous pouvez également utiliser Parser () à partir de html-react-parser. J'ai utilisé la même chose. Lien partagé.

je commence à utiliser le paquet npm appelé react-html-parser

Pour ceux qui expérimentent encore, npm installe react-html-parser

Quand je l'ai installé, il y avait 123628 téléchargements hebdomadaires.

import ReactHtmlParser from 'react-html-parser'

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

Vous pouvez utiliser ce qui suit si vous souhaitez rendre le code HTML brut dans React

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

Exemple - Rendu

Le test est une bonne journée