Rendering raw html с реакцией

Ответ 1

Вы можете использовать модуль html-to-react npm.

Примечание: я являюсь автором модуля и только что опубликовал его несколько часов назад. Пожалуйста, не стесняйтесь сообщать о любых ошибках или проблемах юзабилити.

Ответ 2

В настоящее время более безопасные методы визуализации HTML. Я рассказал об этом в предыдущем ответе здесь. У вас есть 4 варианта, последний использует dangerouslySetInnerHTML.

Методы рендеринга HTML

• Самый простой. Используйте 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>&middot;</span>, ' Second']}</div>

• Last Resort. Вставьте исходный HTML с помощью dangerouslySetInnerHTML.

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

Ответ 3

Я использовал это в быстрых и грязных ситуациях:

// react render method:

render() {
    return (
      <div>
        { this.props.textOrHtml.indexOf('</') !== -1
            ? (
                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
                </div>
              )
            : this.props.textOrHtml
          }

      </div>
      )
  }

Ответ 4

export class ModalBody extends Component{
    rawMarkup(){
        var rawMarkup = this.props.content
        return { __html: rawMarkup };
    }
    render(){
        return(
                <div className="modal-body">
                     <span dangerouslySetInnerHTML={this.rawMarkup()} />

                </div>
            )
    }
}

Ответ 5

Я пробовал этот чистый компонент:

const RawHTML = ({children, className = ""}) => 
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

Особенности

• Принимает опору className (ее легче оформить)
• Заменяет \n на <br /> (вы часто хотите это сделать)
• При использовании компонента размещайте контент как дочерний, например:
• <RawHTML>{myHTML}</RawHTML>

Я поместил компонент в Gist на Github: RawHTML: чистый компонент ReactJS для рендеринга HTML

Ответ 6

dangerouslySetInnerHTML не должен использоваться без крайней необходимости. Согласно документам, "Это в основном для взаимодействия с библиотеками манипулирования строками DOM". Когда вы используете его, вы отказываетесь от преимуществ управления React DOM.

В вашем случае довольно просто преобразовать в правильный синтаксис JSX; просто измените атрибуты class на className. Или, как упоминалось в комментариях выше, вы можете использовать библиотеку ReactBootstrap, которая инкапсулирует элементы Bootstrap в компоненты React.

Ответ 7

Я использовал эту библиотеку под названием Parser. Это сработало для того, что мне было нужно.

import React, { Component } from 'react';    
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};

Ответ 8

Здесь размещена чуть менее самоуверенная версия функции RawHTML. Это позволяет вам:

• настроить тег
• при желании заменить символы новой строки на <br />
• передать дополнительные реквизиты, которые RawHTML передаст созданному элементу
• введите пустую строку (RawHTML></RawHTML>)

Здесь компонент:

const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
    React.createElement(tag, {
        dangerouslySetInnerHTML: {
            __html: nl2br
                ? children && children.replace(/\n/g, '<br />')
                : children,
        },
        ...rest,
    });
RawHTML.propTypes = {
    children: PropTypes.string,
    nl2br: PropTypes.bool,
    tag: PropTypes.string,
};

Использование:

<RawHTML>{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2">{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First &middot; Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>

Выход:

<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>

Это сломается на:

<RawHTML><h1>First &middot; Second</h1></RawHTML>

Ответ 9

dangerouslySetInnerHTML - Реагирует на замену при использовании innerHTML в DOM браузера. В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).

Лучше/безопаснее санировать ваш необработанный HTML (используя, например, DOMPurify), прежде чем вводить его в DOM через dangerouslySetInnerHTML.

DOMPurify - сверхбыстрое, сверхустойчивое дезинфицирующее средство XSS только для DOM, для HTML, MathML и SVG. DOMPurify работает с безопасным значением по умолчанию, но предлагает множество настроек и ловушек.

Пример:

import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)

const rawHTML = '
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
'

const YourComponent = () => (
  <div>
    { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
  </div>
)

export default YourComponent

Ответ 10

Мне нужно было использовать ссылку с атрибутом onLoad в моей голове, где div не разрешен, так что это вызвало у меня сильную боль. Мой текущий обходной путь - закрыть исходный тег сценария, сделать то, что мне нужно, затем открыть тег сценария (чтобы он был закрыт оригиналом). Надеюсь, это поможет кому-то, у кого нет другого выбора:

<script dangerouslySetInnerHTML={{ __html: '</script>
   <link rel="preload" href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Open+Sans'; return false;" as="style" onLoad="this.onload=null;this.rel='stylesheet'" crossOrigin="anonymous"/>
<script>',}}/>