Вставити HTML з реагуючими змінними (JSX)

Я будую щось із React, куди мені потрібно вставити HTML із змінними React у JSX. Чи існує спосіб мати змінну на зразок такої:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

і вставити його в такий відреагувати, і чи спрацює це?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

і чи вставити він HTML, як очікувалося? Я не бачив і не чув нічого про функцію реагування, яка могла б зробити це вбудованим способом, або метод розбору речей, які дозволяли б цьому працювати.

Ви можете використовувати небезпечноSetInnerHTML , наприклад,

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

Зауважте, що це dangerouslySetInnerHTMLможе бути небезпечно, якщо ви не знаєте, що знаходиться в рядку HTML, який ви вводите. Це пов’язано з тим, що зловмисний код на стороні клієнта може бути введений за допомогою тегів сценарію.

Це, мабуть, гарна ідея очистити HTML-рядок за допомогою такої утиліти, як DOMPurify, якщо ви не впевнені на 100%, що HTML, який ви надаєте, є безпечним для XSS (міжсайтового сценарію).

Приклад:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

небезпечноSetInnerHTML має багато недоліків, оскільки він встановлений всередині тегу.

Я пропоную вам скористатись такою реактивною обгорткою, як я знайшов її для npm для цієї мети. html-react-аналізатор виконує ту саму роботу.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Дуже просто :)

Використовуючи, ''ви перетворюєте його на рядок. Використовуйте без перевернутих коми, це буде добре.

Щоб уникнути помилок лінійки, я використовую його так:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

Використовуючи '' встановлює значення для рядка, і React не може знати, що це HTML-елемент. Ви можете зробити наступне, щоб React дізнався, що це елемент HTML -

1. Видаліть ''і воно буде працювати
2. Використовуйте <Fragment>для повернення елемента HTML.

Якщо хтось ще приземлиться тут. За допомогою ES6 ви можете створити вашу HTML-змінну так:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

Ви також можете включити цей HTML в ReactDOM так:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Ось два посилання та link2 з документації React, які можуть бути корисними.