Insérer du code HTML à Réagir Variable Consolidés (JSX)
je construis quelque chose avec React où je dois insérer du HTML avec des Variables React dans JSX. Est-il possible d'avoir une variable comme ceci:
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
et de l'insérer dans réagissent comme ça, et de le faire travailler?
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
et est-ce qu'il insère le HTML comme prévu? Je n'ai rien vu ou entendu à propos d'une fonction de réaction qui pourrait faire cela en ligne, ou une méthode d'analyse des choses qui permettrait à cela de fonctionner.
7 réponses
vous pouvez utiliser dangerouslySetInnerHTML , par exemple
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
notez que dangerouslySetInnerHTML peut être dangereux si vous ne savez pas ce qu'il y a dans la chaîne HTML que vous injectez. c'est parce que le code côté client malveillant peut être injecté via des balises de script.
c'est probablement une bonne idée de nettoyer la chaîne HTML via un utilitaire tel que DOMPurify si vous n'êtes pas sûr à 100% que le HTML que vous rendez est sûr XSS (cross-site scripting).
exemple:
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>
);
}
dangerouslySetInnerHTML présente de nombreux inconvénients car il est placé à l'intérieur de l'étiquette.
je vous suggère d'utiliser un emballage de réaction comme j'en ai trouvé un ici sur npm dans ce but. html-réagir-analyseur fait le même travail.
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>
);
}
Très Simple :)
pour éviter les erreurs de linter, Je l'utilise comme ceci:
render() {
const props = {
dangerouslySetInnerHTML: { __html: '<br/>' },
};
return (
<div {...props}></div>
);
}
en utilisant '' vous le faites à string. Utilisez sans guillemets inversés il fonctionnera très bien.
si quelqu'un d'autre atterrit encore ici. Avec ES6 vous pouvez créer votre variable html comme suit:
render(){
var thisIsMyCopy = (
<p>copy copy copy <strong>strong copy</strong></p>
);
return(
<div>
{thisIsMyCopy}
</div>
)
}
vous pouvez également inclure ce HTML dans ReactDOM like this:
var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);
ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));
voici deux liens lien et lien de la documentation React qui pourrait être utile.