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

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

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

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

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

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

124
frontend html javascript react-jsx reactjs

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

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

  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