Reactjs конвертировать HTML-строку в JSX


213

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

ReactJS визуализирует строку

Данные отображаются с помощью функции обратного вызова jjery Ajax.

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

введите описание изображения здесь

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

Ответы:


407

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

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

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


4
Этот синтаксис показан на домашней странице и в учебном пособии, но я только что понял, что он больше нигде не задокументирован, поэтому я просто подал # 413 для исправления.
Софи Алперт

Верный! Я уже решил это, используя опасно
SetInnerHTML,

Если вы получаете эту информацию из внешнего API-интерфейса , стоит обезопасить контент, используя sanitizeфункцию из dompurifyпакета npm.
Барри Майкл Дойл

77

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

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

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

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

  2. Безопаснее - используйте номер Unicode для объекта внутри строки 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'}} />


15
Я подготовил документацию, но о длинной строке HTML, такой как строка из редактора WYSIWYG? Я не могу понять, как мы можем использовать 1-й, 2-й или 3-й метод
Эрикн

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

14
Ага. Эти примеры с жестко закодированным «динамическим» контентом не имеют большого смысла.
регулярный микрофон

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

36

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

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

  • Interweave - это мощная библиотека React, которая может:
    • Безопасно отображать HTML без опасного использования SetInnerHTML.
    • Безопасно лишить 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


//to install package using npm, execute the command
npm install interweave

Не могли бы вы привести пример использования, пожалуйста?
Эль Анонимо

1
@ElAnonimo Я добавил пример использования. Надеюсь, это сделает вещи немного яснее.
Арман Ниш

1
Спасибо за миллион, переплетение - это именно то, что мне было нужно. Приветствия.
Николас Гамильтон

1
Документация для этого не полезна. Также я попробовал несколько строк HTML, и у меня была страница, полная сообщений об ошибках. У кого-нибудь есть примеры или какие-либо ресурсы с документацией?
Тарун Колла


6

Я нашел эту JS Fiddle. это работает так

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


К сожалению, документ не работает на сервере рендеринга.
Лоран Ван Винкель

Это может import JSDOM from 'jsdom'; global.window = new JSDOM('', { url: 'http://localhost' }); global.document = global.window.document;
Coty Embry


2

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


1

Для тех, кто все еще экспериментирует, npm устанавливает response-html-parser

Когда я установил его, он имел 123628 загрузок в неделю.

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

0

Вы можете использовать следующее, если вы хотите визуализировать сырой HTML в React

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

Пример - Render

Тест хороший день

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.