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?

128
ajax javascript jquery react-jsx reactjs

6 ответов

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

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

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

271

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

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

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

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

  2. безопасное - используйте номер Юникода для сущности внутри Javascript строка.

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

    или

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

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

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

  4. Последней Инстанции - вставить необработанный HTML с помощью dangerouslySetInnerHTML.

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

49

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

Я рекомендую использовать вплетает создано 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
3

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

1

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

0