Вставка 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
javascript html reactjs react-jsx frontend

7 ответов:

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

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

отметим, что 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>
    );
}
50

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

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

22

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

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

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

0

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

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

вы также можете включить этот 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, которая может быть полезна.

-3