У меня проблемы с 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?
По умолчанию React ускоряет выполнение HTML-кода для предотвращения XSS. Если вы действительно хотите отображать HTML, вы можете использовать свойство dangerouslySetInnerHTML
:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
Реагирует на этот преднамеренно громоздкий синтаксис, чтобы вы не случайно отображали текст как HTML и вводили ошибки XSS.
Теперь есть более безопасные методы для этого. Документы были обновлены с помощью этих методов.
Другие методы
Самый простой. Используйте 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'}} />
Я нашел эту скрипту 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 ссылка
Я рекомендую использовать Interweave, созданный milesj. Его феноменальная библиотека, которая использует число, если изобретательные методы для синтаксического анализа и безопасного вставки HTML в DOM.
Interweave - это интерактивная библиотека для безопасного отображения HTML, фильтрации атрибуты, текст автоуровня с помощью шаблонов, отображение символов emoji и гораздо больше.