Reactjs конвертировать в html
У меня возникли проблемы с ReactJS facebook. Всякий раз, когда я делаю ajax и хочу отображать данные html, ReactJS отображает его как текст. (См. рис. ниже)
данные отображаются через функцию обратного вызова успеха jQuery Ajax.
$.ajax({
url: url here,
dataType: "json",
success: function(data) {
this.setState({
action: data.action
})
}.bind(this)
});
есть ли простой способ преобразовать это в html? Как это сделать с помощью ReactJS?
6 ответов
по умолчанию React избегает HTML, чтобы предотвратить XSS-атак (межсайтовый скриптинг). Если вы действительно хотите отобразить HTML, вы можете использовать dangerouslySetInnerHTML
свойства:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
React заставляет этот намеренно громоздкий синтаксис, чтобы вы случайно не отображали текст как HTML и не вводили ошибки XSS.
теперь есть более безопасные методы для достижения этого. The документы были обновлены С помощью этих методов.
Другие Способы
-
простой - используйте 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>
-
Последней Инстанции - вставить необработанный 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 ссылке
Я рекомендую использовать вплетает создано milesj. Его феноменальная библиотека, которая использует ряд изобретательных методов для анализа и безопасной вставки HTML в DOM.
Interweave-это библиотека react для безопасного отображения HTML, фильтра атрибуты, текст autowrap с сопоставителями, символы emoji и намного больше.
-
Interweave-это надежная библиотека React, которая может:
- безопасное отображение HTML без использования dangerouslySetInnerHTML.
- безопасное удаление HTML-тегов.
- автоматическое предохранение от XSS и впрыски.
- очистить атрибуты HTML с помощью фильтров.
- интерполировать компоненты с помощью сопоставителей.
- Автоссылка URL-адреса, IP-адреса, электронную почту, и хэштеги.
- Render Emoji и символы смайликов.
- и многое еще!
Пример Использования:
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
вы также можете использовать Parser () из html-react-parser. Я использовал то же самое. ссылке общий.