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.

124
demandé sur Sophie Alpert 2014-05-12 22:28:55
la source

7 ответов

vous pouvez utiliser dangerouslySetInnerHTML , par exemple

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}
191
répondu Douglas 2017-05-23 13:31:37
la source

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>
    );
}
50
répondu Yo Wakita 2017-02-22 04:17:55
la source

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 :)

22
répondu user2903536 2017-08-17 08:28:43
la source

pour éviter les erreurs de linter, Je l'utilise comme ceci:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }
1
répondu Tudor Morar 2018-05-22 15:19:08
la source

en utilisant '' vous le faites à string. Utilisez sans guillemets inversés il fonctionnera très bien.

0
répondu chauhan amit 2018-03-16 19:03:27
la source

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>
    )
}
-2
répondu Harry 2017-10-27 16:30:15
la source

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.

-3
répondu GrassLand 2018-03-16 13:30:57
la source

Autres questions sur