it-swarm.com.ru

Отобразить строку HTML как настоящий HTML в компоненте React

Вот что я попробовал и как все идет не так.

Это работает:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Это не:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

Свойство description - это просто обычная строка содержимого HTML. Однако по какой-то причине он отображается как строка, а не как HTML.

enter image description here

Какие-либо предложения?

81
Sergio Tapia

Убедитесь, что текст, который вы пытаетесь добавить к узлу, не экранирован, как это:

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

Вместо этого:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

если экранирован, вы должны конвертировать его со стороны сервера.

The node is text because is escaped

Узел текстовый, потому что экранированный

The node is a dom node because isn't escaped

Узел является узлом dom, потому что не экранирован

25
Sergio Flores

Является ли this.props.match.description строкой или объектом? Если это строка, она должна быть преобразована в HTML. Пример:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Результат: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Однако, если description: <h1 style="color:red;">something</h1> без кавычек '' вы получите:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Если это строка, и вы не видите никакой разметки HTML, единственная проблема, которую я вижу, это неправильная разметка.

ОБНОВИТЬ

Если вы имеете дело с HTMLEntitles. Вы должны декодировать их перед отправкой на dangerouslySetInnerHTML, поэтому они назвали это опасно :)

Рабочий пример:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
58
Ilanus

Если вы контролируете, откуда берется строка, содержащая html (т.е. где-то в вашем приложении), вы можете воспользоваться новым API <Fragment>, выполнив что-то вроде:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}
10
Brad Adams

Я использовал 'response-html-parser'

yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser'; 

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

Источник на npmjs.com

5
pixelearth