Reactjs konwertuje ciąg HTML na jsx

Mam problem z ReactJS na Facebooku. Ilekroć robię ajax i chcę wyświetlić dane HTML, ReactJS wyświetla je jako tekst. (Patrz rysunek poniżej)

Dane są wyświetlane przez funkcję wywołania zwrotnego jQuery Ajax.

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

Czy jest jakiś prosty sposób przekonwertować to na HTML? Jak mam to zrobić za pomocą ReactJS?

Domyślnie React ucieka z kodu HTML, aby zapobiec XSS (skryptom krzyżowym) . Jeśli naprawdę chcesz renderować HTML, możesz użyć dangerouslySetInnerHTMLwłaściwości:

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

React wymusza tę celowo nieporęczną składnię, aby przypadkowo nie renderować tekstu jako HTML i nie wprowadzać błędów XSS.

Istnieją teraz bezpieczniejsze metody osiągnięcia tego celu. Dokumenty zostały zaktualizowane przy użyciu tych metod.

Inne metody

1. Najłatwiejszy - użyj Unicode, zapisz plik jako UTF-8 i ustaw na charsetUTF-8.

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

2. Bezpieczniej - użyj numeru Unicode dla encji wewnątrz ciągu JavaScript.

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

   lub

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

3. Lub tablica mieszana z ciągami znaków i elementami JSX.

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

4. Last Resort - Wstaw surowy HTML za pomocą dangerouslySetInnerHTML.

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

Polecam przy użyciu Interweave stworzony przez milesj . Jest to fenomenalna biblioteka, która wykorzystuje wiele genialnych technik do analizowania i bezpiecznego wstawiania HTML do DOM.

Interweave to biblioteka reagująca do bezpiecznego renderowania HTML, filtrowania atrybutów, automatycznego zawijania tekstu za pomocą dopasowań, renderowania znaków emoji i wielu innych.

• Interweave to solidna biblioteka React, która może:
  • Bezpiecznie renderuj HTML bez użycia niebezpiecznieSetInnerHTML.
  • Bezpiecznie usuwaj tagi HTML.
  • Automatyczna ochrona XSS i wtrysku.
  • Wyczyść atrybuty HTML za pomocą filtrów.
  • Interpoluj komponenty za pomocą dopasowań.
  • Automatycznie łącz adresy URL, adresy IP, e-maile i hashtagi.
  • Renderuj znaki Emoji i emotikony.
  • I wiele więcej!

Przykład użycia:

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>

znalazłem to skrzypce js. to działa w ten sposób

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>

link jsfiddle

Możesz także użyć Parser () z HTML-React-Parser. Użyłem tego samego. Link udostępniony.

zaczynam korzystać z pakietu npm o nazwie reaguj-HTML-parser

Dla tych, którzy wciąż eksperymentują, npm zainstaluj install-html-parser

Po zainstalowaniu miał 123628 pobrań tygodniowo.

import ReactHtmlParser from 'react-html-parser'

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

Możesz użyć poniższych, jeśli chcesz renderować surowy HTML w React

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

Przykład - Renderuj

Test to dobry dzień