Вставка HTML с помощью операторов переменных React (JSX)


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

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

и вставить его в react вот так, и заставить его работать?

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

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

7 124

7 ответов:

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

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

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

это, вероятно, хорошая идея, чтобы очистить строку 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>
    );
}

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

Я предлагаю вам использовать некоторые react обертку, как я нашел один здесь на 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>
    );
}

Очень Удобно :)

чтобы избежать ошибок линтера, я использую его следующим образом:

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

С помощью '' вы делаете это в строку. Использовать без кавычек, он будет работать нормально.

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