Рендеринг raw html с помощью reactjs

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

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

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

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

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

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

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

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>
            )
    }
}

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

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

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

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

вот немного менее самоуверенная версия функции RawHTML, опубликованной ранее. Это позволяет вам:

• настроить тег
• при необходимости замените новые строки на <br /> ' s
• передайте дополнительные реквизиты, которые 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>