web-dev-qa-db-fra.com

Insérer du code HTML avec des instructions variables de réaction (JSX)

Je construis quelque chose avec React où je dois insérer du HTML avec des variables de React dans JSX. Y a-t-il un moyen d'avoir une variable comme celle-ci:

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

et pour l'insérer dans réagir comme tel, et le faire fonctionner?

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

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

javascripthtmlfrontendreactjsreact-jsx
143
Kyle Hotchkiss

Vous pouvez utiliser dangereusementSetInnerHTML , par exemple.

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

Notez que dangerouslySetInnerHTML peut être dangereux si vous ne savez pas ce que contient la chaîne HTML que vous injectez. Cela est dû au fait que 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 code HTML que vous restituez est sécurisé XSS (script intersite).

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>
    );
}
68
Yo Wakita

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

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

En utilisant '', vous le transformez en chaîne. Utilisez sans guillemets, cela fonctionnera bien. 

2
chauhan amit
import { Fragment } from 'react' // react version > 16.0

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

En utilisant '' the, la valeur devient 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 que React sache qu’il s’agit d’un élément HTML -

  1. Supprimez le '' et cela fonctionnerait
  2. Utilisez <Fragment> pour renvoyer un élément HTML.
1
Amandeep Singh Ghai