Reactjs konvertiert HTML-String in jsx

Ich habe Probleme mit Facebooks ReactJS. Immer wenn ich Ajax mache und HTML-Daten anzeigen möchte, zeigt ReactJS diese als Text an. (Siehe Abbildung unten)

Die Daten werden über die Erfolgsrückruffunktion der jquery Ajax angezeigt.

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

Gibt es eine einfache Möglichkeit, dies in HTML umzuwandeln? Wie soll ich es mit ReactJS machen?

Standardmäßig maskiert React den HTML- Code , um XSS (Cross-Site Scripting) zu verhindern . Wenn Sie HTML wirklich rendern möchten, können Sie die dangerouslySetInnerHTMLEigenschaft verwenden:

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

React erzwingt diese absichtlich umständliche Syntax, damit Sie nicht versehentlich Text als HTML rendern und XSS-Fehler einführen.

Es gibt jetzt sicherere Methoden, um dies zu erreichen. Die Dokumente wurden mit diesen Methoden aktualisiert .

Andere Methoden

1. Am einfachsten - Verwenden Sie Unicode, speichern Sie die Datei als UTF-8 und setzen Sie sie charsetauf UTF-8.

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

2. Sicherer - Verwenden Sie die Unicode-Nummer für die Entität in einer Javascript-Zeichenfolge.

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

   oder

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

3. Oder ein gemischtes Array mit Zeichenfolgen und JSX-Elementen.

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

4. Letzter Ausweg - Fügen Sie rohes HTML mit ein dangerouslySetInnerHTML.

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

Ich empfehle die Verwendung von Interweave, das von Milesj erstellt wurde . Es ist eine phänomenale Bibliothek, die eine Reihe von raffinierten Techniken verwendet, um HTML zu analysieren und sicher in das DOM einzufügen.

Interweave ist eine Reaktionsbibliothek zum sicheren Rendern von HTML, Filtern von Attributen, Autowrap-Text mit Matchern, Rendern von Emoji-Zeichen und vielem mehr.

• Interweave ist eine robuste React-Bibliothek, die:
  • Rendern Sie HTML sicher, ohne gefährlichSetInnerHTML zu verwenden.
  • HTML-Tags sicher entfernen.
  • Automatischer XSS- und Einspritzschutz.
  • Bereinigen Sie HTML-Attribute mithilfe von Filtern.
  • Interpolieren Sie Komponenten mithilfe von Matchern.
  • Autolink-URLs, IPs, E-Mails und Hashtags.
  • Rendern Sie Emoji und Emoticon Zeichen.
  • Und vieles mehr!

Anwendungsbeispiel:

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>

Ich fand diese Geige. das funktioniert so

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 link

Sie können auch Parser () aus dem HTML-React-Parser verwenden. Ich habe das gleiche benutzt. Link geteilt.

Ich beginne mit dem npm-Paket namens react-html-parser

Für diejenigen, die noch experimentieren, installiert npm den react-html-parser

Als ich es installierte, hatte es 123628 wöchentliche Downloads.

import ReactHtmlParser from 'react-html-parser'

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

Sie können Folgendes verwenden, wenn Sie rohes HTML in React rendern möchten

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

Beispiel - Rendern

Test ist ein guter Tag