Insertar HTML con declaraciones variables de React (JSX) [duplicado]
Estoy construyendo algo con React donde necesito insertar HTML con variables de React en JSX. ¿Hay alguna manera de tener una variable como esta?
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
¿Y insertarlo en reaccionar así y hacer que funcione?
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
¿Y hacer que inserte el HTML como se esperaba? No he visto ni oído nada sobre una función de reacción que pueda hacer esto en línea, o un método para analizar cosas que permita que esto funcione.
Puedes usar peligrosamenteSetInnerHTML , por ejemplo
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
Tenga en cuenta que dangerouslySetInnerHTMLpuede ser peligroso si no sabe qué hay en la cadena HTML que está inyectando. Esto se debe a que se puede inyectar código malicioso del lado del cliente mediante etiquetas de script.
Probablemente sea una buena idea desinfectar la cadena HTML mediante una utilidad como DOMPurify si no está 100% seguro de que el HTML que está renderizando sea seguro XSS (cross-site scripting).
Ejemplo:
import DOMPurify from 'dompurify'
const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
);
}
