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

Question

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

90

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

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

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

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

Peter Wateber 09 окт. 2013, в 09:14

Источник

Теги:

javascript

jquery

reactjs

ajax

react-jsx

4 ответа

44

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

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

Самый простой. Используйте 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>·</span>, ' Second']}</div>
Last Resort. Вставьте необработанный HTML с помощью dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

Brett DeWoody 14 янв. 2015, в 08:24

7

Я подготовил документацию, но о длинной строке HTML, такой как строка из редактора WYSIWYG? Я не вижу, как мы можем использовать 1-й, 2-й или 3-й метод
ericn 14 авг. 2015, в 03:47
4

Я согласен с @eric. Что хорошего в методах 1-3 для уже экранированного контента, хранящегося где-то, например, в БД? Также обратите внимание, что метод 4 - единственный метод - означает, что вы не можете добавлять дочерние узлы.
dvdplm 23 сен. 2015, в 19:20
8

Ага. Эти примеры с жестко закодированным «динамическим» контентом не имеют большого смысла.
regularmike 10 окт. 2015, в 00:47
0

Это мой innerHTML - «Отображение администраторов в общей сложности - 10 всего из 10», в то время как это то, что визуализируется - «Отображение администраторы <b> 1 & nbsp; - & lt; 10 </ b> из <b> 13 </ b> всего ". Когда я пытаюсь использовать опасно SetInnerHTML, все ломается.
vipin8169 21 март 2016, в 11:36

Показать ещё 2 комментария

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

Hasan Gilak 23 янв. 2016, в 00:01

0

К сожалению, документ не работает на сервере рендеринга.
Laurent Van Winckel 17 сен. 2016, в 13:15

0

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

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

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

Arman Nisch 07 нояб. 2017, в 15:02

0

Не могли бы вы привести пример использования, пожалуйста?
El Anonimo 06 авг. 2018, в 10:18
1

@ElAnonimo Я добавил пример использования. Надеюсь, что это делает вещи немного яснее.
Arman Nisch 16 сен. 2018, в 07:26
0

Оно делает. Документы мне не пригодились.
El Anonimo 16 сен. 2018, в 11:24
0

Спасибо миллион, переплетение это именно то, что мне нужно. Приветствия.
Nicholas Hamilton 26 фев. 2019, в 22:48

Показать ещё 2 комментария

Ещё вопросы

Я подготовил документацию, но о длинной строке HTML, такой как строка из редактора WYSIWYG? Я не вижу, как мы можем использовать 1-й, 2-й или 3-й метод
Я согласен с @eric. Что хорошего в методах 1-3 для уже экранированного контента, хранящегося где-то, например, в БД? Также обратите внимание, что метод 4 - единственный метод - означает, что вы не можете добавлять дочерние узлы.
Ага. Эти примеры с жестко закодированным «динамическим» контентом не имеют большого смысла.
Это мой innerHTML - «Отображение администраторов в общей сложности - 10 всего из 10», в то время как это то, что визуализируется - «Отображение администраторы <b> 1 & nbsp; - & lt; 10 </ b> из <b> 13 </ b> всего ". Когда я пытаюсь использовать опасно SetInnerHTML, все ломается.
К сожалению, документ не работает на сервере рендеринга.
Не могли бы вы привести пример использования, пожалуйста?
@ElAnonimo Я добавил пример использования. Надеюсь, что это делает вещи немного яснее.
Оно делает. Документы мне не пригодились.
Спасибо миллион, переплетение это именно то, что мне нужно. Приветствия.

Sophie Alpert · Accepted Answer · 2013-10-09T18-25-00.000Z

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

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

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

Этот синтаксис показан на домашней странице и в учебнике, но я только что понял, что он нигде не документирован, поэтому я просто подал # 413 для исправления.
Правильный! Я решил это уже используя опасно SetInnerHTML, но спасибо, хотя :)