web-dev-qa-db-fra.com

Reactjs convertir en HTML

J'ai du mal à m'occuper de ReactJS sur facebook. Chaque fois que je fais un ajax et que je veux afficher des données html, ReactJS les affiche sous forme de texte. (Voir la figure ci-dessous)

ReactJS render string

Les données sont affichées via la fonction callback success de jquery Ajax.

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

enter image description here

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

javascriptjqueryajaxreactjsreact-jsx
174
Peter Wateber

Par défaut, React échappe au code HTML pour empêcher XSS (script intersite) . Si vous voulez vraiment rendre le code HTML, vous pouvez utiliser la propriété dangerouslySetInnerHTML :

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

React force cette syntaxe volontairement lourde à ne pas rendre accidentellement le texte au format HTML et à ne pas introduire de bogues XSS.

349
Sophie Alpert

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

Autres méthodes

  1. Plus facile - Utilisez Unicode, enregistrez le fichier au format UTF-8 et réglez la charset sur UTF-8.

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

  2. Safer - Utilisez le numéro Unicode pour l'entité dans 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. Dernier recours - Insérez du code HTML brut à l'aide de dangerouslySetInnerHTML.

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

67
Brett DeWoody

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é HTML dans le DOM.

Interweave est une bibliothèque de réactions permettant de restituer en toute sécurité du HTML, des attributs de filtre, du texte autowrap avec des correspondants, des caractères emoji, etc.

  • Interweave est une robuste bibliothèque React pouvant:
    • Rendre le code HTML en toute sécurité sans utiliser dangereusementSetInnerHTML.
    • En toute sécurité bande de balises HTML.
    • Protection XSS et injection automatique.
    • Nettoyer les attributs HTML à l'aide de filtres.
    • Interpoler les composants à l'aide de correspondants.
    • Autolink URL, adresses 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
18
Arman Nisch

j'ai trouvé ce js violon. ça marche 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>

jsfiddle lien

5
Hassan Gilak

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

2
Abhra Dey

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

0
Dayan