Tworzę coś z React, gdzie muszę wstawić HTML z React Variables w JSX. Czy istnieje sposób na taką zmienną:
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
i wstawić go w taki sposób, żeby działał?
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
i czy wstawia HTML zgodnie z oczekiwaniami? Nie widziałem ani nie słyszałem nic na temat funkcji reagowania, która mogłaby to zrobić bezpośrednio, lub metody analizowania rzeczy, które pozwoliłyby na to.
<head>
?Pamiętaj, że
dangerouslySetInnerHTML
może być niebezpieczne, jeśli nie wiesz, co zawiera wstrzykiwany ciąg HTML. Wynika to z tego, że złośliwy kod po stronie klienta można wstrzykiwać za pomocą znaczników skryptu.Prawdopodobnie dobrym pomysłem jest odkażenie łańcucha HTML za pomocą narzędzia takiego jak DOMPurify, jeśli nie masz 100% pewności, że renderowany HTML jest bezpieczny dla XSS (cross-site scripting).
Przykład:
źródło
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> ); }
niebezpiecznieSetInnerHTML ma wiele wad, ponieważ znajduje się wewnątrz znacznika.
Sugeruję, abyś użył do tego jakiegoś reagującego opakowania, jak znalazłem tutaj na npm. parser HTML-Reaktywuj wykonuje tę samą pracę.
Bardzo prosty :)
źródło
Za pomocą
''
robisz to na sznurku. Użyj bez odwróconych przecinków, będzie działać dobrze.źródło
Aby uniknąć błędów linijek, używam go w następujący sposób:
źródło
Używając „” ustawia wartość na ciąg znaków, a React nie ma możliwości dowiedzenia się, że jest to element HTML. Możesz wykonać następujące czynności, aby poinformować React, że jest to element HTML -
''
i to by działało<Fragment>
aby zwrócić element HTML.źródło
thisIsMyCopy
sama w sobie to JSX, a nie ciąg HTML. Więc dosłownie wklejasz JSX do JSX.Jeśli ktoś jeszcze tu wyląduje. Za pomocą ES6 możesz utworzyć swoją zmienną HTML tak:
źródło
{}
i cały łańcuch w taki sposób(<span>{telephoneNumber} <br /> {email}</span>)
<p>copy copy copy <strong>strong copy</strong></p>
jest ciąg. Masz go jako JSX.Możesz także dołączyć ten kod HTML do ReactDOM w następujący sposób:
Oto dwa linki link i link2 z dokumentacji React, które mogą być pomocne.
źródło