Reactjs конвертувати HTML-рядок у jsx

У мене виникають проблеми з 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?

За замовчуванням React уникає HTML, щоб запобігти XSS (міжсайтовий сценарій) . Якщо ви дійсно хочете візуалізувати HTML, ви можете використовувати dangerouslySetInnerHTMLвластивість:

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

Реакція змушує цей навмисно громіздкий синтаксис, щоб ви випадково не надавали текст як HTML і не вводили помилки XSS.

Зараз існують безпечніші методи для досягнення цього. У документах були оновлені з допомогою цих методів.

Інші методи

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'}} />

Я рекомендую використовувати переплетення, створене milesj . Це феноменальна бібліотека, яка використовує число, якщо геніальні методи аналізують та безпечно вставляють HTML у DOM.

Переплетення - це бібліотека реагувань для безпечного візуалізації HTML, атрибутів фільтру, автоматичного загортання тексту з відповідниками, візуалізації символів смайлів та багато іншого.

• Переплетення - це надійна бібліотека 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

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

я знайшов цю загадку 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 посилання

Ви також можете використовувати Parser () від html-react-parser. Я використовував те саме. Посилання спільне.

я починаю використовувати пакет npm під назвою react-html-аналізатор

Для тих, хто все ще експериментує, npm install reakct-html-аналізатор

Коли я встановив його, було 123628 завантажень за тиждень.

import ReactHtmlParser from 'react-html-parser'

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

Ви можете скористатися наступним, якщо ви хочете відобразити необроблений HTML в React

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

Приклад - Візуалізація

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