Візуалізуйте рядок HTML як реальний HTML в компоненті React

Ось, що я спробував і як це виходить не так.

Це працює:

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

Це не так:

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

Властивість опису - це лише звичайний рядок вмісту HTML. Однак він відображається як рядок, а не як HTML чомусь.

Будь-які пропозиції?

Перевірте, чи не вийшов текст, який ви намагаєтеся додати до вузла, таким чином:

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

Замість цього:

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

якщо уникнути, слід перетворити його з боку сервера.

Вузол - це текст, тому що він уникнути

Вузол - це вузол купола, тому що його не уникнути

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

Я використовую 'react-html-аналізатор'

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. Уникає використання небезпечноSetInnerHTML та перетворює стандартні елементи 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>
}

Ви просто використовуєте метод React небезпечноSetInnerHTML

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

Або ви можете більше реалізувати за допомогою цього простого способу: Візуалізуйте HTML-код у сирому додатку React

небезпечноSetInnerHTML

небезпечноSetInnerHTML є заміною React для використання innerHTML у DOM браузера. Взагалі, встановлення HTML-коду є ризикованим, оскільки легко ненавмисно піддавати своїх користувачів атак міжсайтового сценарію (XSS). Отже, ви можете встановити HTML безпосередньо з React, але вам доведеться набрати небезпечноSetInnerHTML та передати об’єкт за допомогою ключа __html, щоб нагадати собі, що це небезпечно. Наприклад:

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

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

Я використовую innerHTML разом із посиланням на проміжок:

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

У моєму випадку я використав react-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 . У мене була вимога показати декілька символів uncode 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. Я рекомендую не використовувати "небезпечноSetInnerHTML".

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