Вставить HTML с помощью React Variable Statement (JSX)

Я создаю что-то с React, где мне нужно вставить HTML с React Variables в JSX. Есть ли способ иметь такую переменную:

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

и вставить его так, чтобы он реагировал так, чтобы он работал?

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

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

Ответ 1

Вы можете использовать dangerouslySetInnerHTML, например

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

Ответ 2

Обратите внимание, что dangerouslySetInnerHTML может быть опасным, если вы не знаете, что находится в строке HTML, которую вы вставляете. Это связано с тем, что код вредоносной клиентской стороны можно вводить с помощью тегов script.

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

Пример:

import DOMPurify from 'dompurify'

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


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

Ответ 3

dangerouslySetInnerHTML имеет много недостатков, потому что он установлен внутри тега.

Я предлагаю вам использовать некоторую реактивную оболочку, например, я нашел ее здесь, на npm для этой цели. html-react-parser выполняет ту же работу.

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

Очень просто:)

Ответ 4

Если кто-то еще приземляется здесь. С ES6 вы можете создать свою html-переменную следующим образом:

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