Я строю что-то с React, где мне нужно вставить HTML с переменными React в JSX. Есть ли способ иметь переменную так:
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
и вставить его в реакцию, как это так, и это работает?
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
и он вставит HTML, как ожидалось? Я не видел и не слышал ничего о функции реагирования, которая могла бы делать это встроенным, или о методе анализа вещей, который позволил бы этому работать.
<head>
?Обратите внимание, что это
dangerouslySetInnerHTML
может быть опасно, если вы не знаете, что находится в вводимой HTML-строке.Это потому, что вредоносный код на стороне клиента может быть введен через теги скрипта.Вероятно, это хорошая идея для очистки строки HTML с помощью такой утилиты, как DOMPurify. если вы не уверены на 100%, что HTML- , который вы отображаете, безопасен для XSS (межсайтовый скриптинг).
Пример:
источник
import DOMPurify from 'dompurify' const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >'; render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div> ); }
dangerouslySetInnerHTML имеет много недостатков, потому что он установлен внутри тега.
Я предлагаю вам использовать какую-нибудь реактивную оболочку, как я нашел здесь для npm. html-реагировать-парсер делает ту же работу.
Очень просто :)
источник
Используя его,
''
вы превращаете его в строку. Используйте без кавычек, он будет работать нормально.источник
Чтобы избежать ошибок линтера, я использую это так:
источник
Использование '' устанавливает значение в строку, и React не может знать, что это HTML-элемент. Вы можете сделать следующее, чтобы React знал, что это HTML-элемент:
''
и это будет работать<Fragment>
для возврата элемента HTML.источник
thisIsMyCopy
сам по себе является JSX, а не строкой HTML. Таким образом, вы буквально вставляете JSX в JSX.Если кто-то еще все еще приземляется здесь. С ES6 вы можете создать свою HTML-переменную следующим образом:
источник
{}
строку и всю строку в какую-то разметку следующим образом(<span>{telephoneNumber} <br /> {email}</span>)
<p>copy copy copy <strong>strong copy</strong></p>
есть строка. У вас это как JSX.Вы также можете включить этот HTML-код в ReactDOM следующим образом:
Вот две ссылки link и link2 из документации React, которые могут быть полезны.
источник