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

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

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

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

Это не:

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

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

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

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

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

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

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

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

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

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

Является 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: '<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'));

Я использую 'response-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

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

Поднятие комментария @ okram для большей наглядности:

из его описания на github: преобразует строки HTML непосредственно в компоненты React, избегая необходимости опасно использовать SetInnerHTML от npmjs.com. Утилита для преобразования строк HTML в компоненты React. Избегает использования dangerouslySetInnerHTML и преобразует стандартные элементы HTML, атрибуты и встроенные стили в их эквиваленты React.

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

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

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

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

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

dangerouslySetInnerHTML

dangerouslySetInnerHTML - это замена React для использования innerHTML в DOM браузера. В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS). Таким образом, вы можете установить HTML непосредственно из React, но вы должны ввести опасно SetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это опасно. Например:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Я использую innerHTML вместе ref для span:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

В моем случае я использовал response-render-html

Сначала установите пакет npm i --save react-render-html

затем,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Я не мог заставить npm buildработать react-html-parser. Однако в моем случае я смог успешно использовать https://reactjs.org/docs/fragments.html . У меня было требование показать несколько html символов Юникода, но они не должны быть непосредственно встроены в JSX. В JSX его нужно было выбирать из состояния компонента. Фрагмент кода компонента приведен ниже:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

я использую https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Если у вас есть контроль над {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}
);