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

Ответ 1

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

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

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

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

Если это экранирование, вы должны преобразовать его со своей серверной стороны.

node - это текст, поскольку он экранирован

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

Ответ 2

Есть ли 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, единственная проблема, я вижу неправильную разметку.

UPDATE

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

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

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   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'));

Ответ 3

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

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

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

Ответ 4

Если у вас есть контроль над тем, откуда берется строка, содержащая 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>
}

Ответ 5

Вы просто используете опасно SetInnerHTML метод React

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Или вы можете реализовать больше с помощью этого простого способа: Рендеринг HTML raw в приложении React

Ответ 6

Если у вас есть контроль над {this.props.match.description} и вы используете JSX. Я бы порекомендовал не использовать "dangerouslySetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);