Рендеринг необработанного HTML с реагированием

Так это единственный способ визуализировать необработанный html с помощью activjs?

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

Я знаю, что есть несколько классных способов разметки вещей с помощью JSX, но я в основном заинтересован в возможности рендеринга необработанного html (со всеми классами, встроенными стилями и т. д.). Что-то сложное, как это:

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<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>

Я бы не хотел переписывать все это в JSX.

Может быть, я думаю, что все это неправильно. Пожалуйста, поправьте меня.

96 голосов | спросил vinhboy 14 Jam1000000amWed, 14 Jan 2015 04:01:27 +030015 2015, 04:01:27

6 ответов


0

Вы можете использовать модуль html-to-react npm в https://www.npmjs.com/package/html-to-react .

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

ответил Mike Nikles 21 J0000006Europe/Moscow 2015, 03:02:30
0

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

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

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

ответил Brett DeWoody 15 Jam1000000amThu, 15 Jan 2015 10:41:18 +030015 2015, 10:41:18
0

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

// 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>
      )
  }
ответил Cory Robinson 1 FebruaryEurope/MoscowbWed, 01 Feb 2017 01:32:54 +0300000000amWed, 01 Feb 2017 01:32:54 +030017 2017, 01:32:54
0

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

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

Функции

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

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

ответил Netsi1964 22 AM00000090000004331 2017, 09:31:43
0

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

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

ответил Breno Ferreira 14 Jpm1000000pmWed, 14 Jan 2015 15:58:29 +030015 2015, 15:58:29
0

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

https://github.com/remarkablemark/html-react-parser

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

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};
ответил ecairol 24 +03002018-10-24T04:42:56+03:00312018bEurope/MoscowWed, 24 Oct 2018 04:42:56 +0300 2018, 04:42:56

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132