Insérer du HTML avec des instructions variables React (JSX)

Je construis quelque chose avec React où j'ai besoin d'insérer du HTML avec des variables React dans JSX. Existe-t-il un moyen d'avoir une variable comme ceci:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

et de l'insérer dans réagir comme ça, et ça marche?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

et le faire insérer le HTML comme prévu? Je n'ai rien vu ni entendu parler d'une fonction de réaction qui pourrait faire cela en ligne, ou d'une méthode d'analyse syntaxique qui permettrait à cela de fonctionner.

Vous pouvez utiliser dangereusement SetInnerHTML , par exemple

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

Notez que cela dangerouslySetInnerHTMLpeut être dangereux si vous ne savez pas ce qu'il y a dans la chaîne HTML que vous injectez. En effet, du 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 restituez est sûr XSS (cross-site scripting).

Exemple:

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>
    );
}

dangerouslySetInnerHTML présente de nombreux inconvénients car il est défini à l'intérieur de la balise.

Je vous suggère d'utiliser un wrapper React comme j'en ai trouvé un ici sur npm à cet effet. html-react-parser 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 :)

En utilisant, ''vous faites de la chaîne. Utilisez sans virgules inversées, cela fonctionnera bien.

Pour éviter les erreurs de linter, je l'utilise comme ceci:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

En utilisant '', la valeur est définie sur une chaîne et React n'a aucun moyen de savoir qu'il s'agit d'un élément HTML. Vous pouvez faire ce qui suit pour faire savoir à React qu'il s'agit d'un élément HTML -

1. Retirez le ''et cela fonctionnerait
2. Utilisez <Fragment>pour renvoyer un élément HTML.

Si quelqu'un d'autre atterrit encore ici. Avec ES6, vous pouvez créer votre variable html comme ceci:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

Vous pouvez également inclure ce code HTML dans ReactDOM comme ceci:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Voici deux liens link et link2 de la documentation React qui pourraient être utiles.