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

Question

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

У меня возникли проблемы с ReactJS facebook. Всякий раз, когда я делаю 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?

1119 6

jQuery javascript ajax reactjs react-jsx

6 ответов:

Comments

Ничего не найдено.

Sophie Alpert · Accepted Answer · 2018-09-26 01:23:34

по умолчанию React экранирует HTML, чтобы предотвратить XSS-атак (межсайтовый скриптинг). Если вы действительно хотите отобразить HTML, вы можете использовать dangerouslySetInnerHTML свойства:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
React заставляет этот намеренно громоздкий синтаксис, чтобы вы случайно не отображали текст как HTML и не вводили ошибки XSS.

Brett DeWoody · Accepted Answer · 2015-01-14 20:39:25

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

Другие Способы

простой - используйте 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'}} />

HMG · Accepted Answer · 2016-01-23 01:58:41

Я нашел эту скрипку 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 ссылке

Arman Nisch · Accepted Answer · 2018-09-16 10:24:25

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

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

Interweave-это надежная библиотека реакций, которая может:

безопасно отображать HTML без использования dangerouslySetInnerHTML.

безопасно удалить 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

Abhra Dey · Accepted Answer · 2018-04-13 12:46:40

вы также можете использовать Parser() из html-react-parser. Я использовал то же самое. ссылке общий.

Dayan · Accepted Answer · 2018-08-14 12:24:09

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