Reactjs конвертировать в html

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

ReactJS render string

Данные отображаются через функцию обратного вызова успеха jquery Ajax.

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

enter image description here

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

Ответы

Ответ 1

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

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

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

Ответ 2

Теперь есть более безопасные методы для этого. Документы были обновлены с помощью этих методов.

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

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

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

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

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

    или

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

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

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

  • Last Resort. Вставьте необработанный HTML с помощью dangerouslySetInnerHTML.

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

Ответ 3

Я нашел эту скрипту js. это работает как это

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 ссылка

Ответ 4

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

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

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