Reactjs конвертировать HTML-строку в JSX

У меня проблемы с работой с ReactJS на Facebook. Всякий раз, когда я делаю ajax и хочу отобразить HTML-данные, ReactJS отображает их в виде текста. (См. Рисунок ниже)

Данные отображаются с помощью функции обратного вызова jjery Ajax.

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

Есть ли простой способ преобразовать это в HTML? Как мне это сделать с помощью ReactJS?

По умолчанию React экранирует HTML для предотвращения XSS (межсайтовый скриптинг) . Если вы действительно хотите визуализировать HTML, вы можете использовать dangerouslySetInnerHTMLсвойство:

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

React применяет этот намеренно громоздкий синтаксис, чтобы вы случайно не отображали текст в виде HTML и не представляли ошибки XSS.

В настоящее время есть более безопасные методы для достижения этой цели. В документах были обновлены с помощью этих методов.

Другие Методы

1. Самый простой - используйте Unicode, сохраните файл как UTF-8 и установите charsetUTF-8.

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

2. Безопаснее - используйте номер Unicode для объекта внутри строки Javascript.

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

   или

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

3. Или смешанный массив со строками и элементами JSX.

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

4. Последнее прибежище - Вставьте необработанный HTML, используя dangerouslySetInnerHTML.

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

Я рекомендую использовать Interweave, созданный milesj . Это феноменальная библиотека, которая использует несколько оригинальных методов для анализа и безопасной вставки HTML в DOM.

Interweave - это библиотека реагирования, позволяющая безопасно отображать HTML, фильтровать атрибуты, автоматически переносить текст с помощью сопоставлений, отображать символы эмодзи и многое другое.

• Interweave - это мощная библиотека React, которая может:
  • Безопасно отображать HTML без опасного использования SetInnerHTML.
  • Безопасно лишить HTML-теги.
  • Автоматическая XSS и защита от впрыска.
  • Очистите атрибуты HTML с помощью фильтров.
  • Интерполируйте компоненты, используя сопоставители.
  • Автолинк URL, IP-адреса, электронные письма и хэштеги.
  • Рендеринг эмодзи и смайликов.
  • И многое другое!

Пример использования:

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>

Я нашел эту JS Fiddle. это работает так

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

Вы также можете использовать Parser () из html-response-parser. Я использовал то же самое. Ссылка поделилась.

я начинаю использовать пакет npm под названием response-html-parser

Для тех, кто все еще экспериментирует, npm устанавливает response-html-parser

Когда я установил его, он имел 123628 загрузок в неделю.

import ReactHtmlParser from 'react-html-parser'

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

Вы можете использовать следующее, если вы хотите визуализировать сырой HTML в React

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

Пример - Render

Тест хороший день