web-dev-qa-db-fra.com

Rendu dynamique des composants HTML / React externes dans React

Est-il possible de prendre du contenu HTML/JSX à partir d'une source externe et de le rendre dynamiquement dans React? Dans notre cas, nous voulons prendre le contenu de l'API Wordpress et le rendre sur le client et le serveur (nous utilisons NextJS)

Ainsi, l'API Wordpress renvoie une réponse JSON qui inclut une propriété de contenu qui est une chaîne HTML/JSX. Le contenu ressemblerait à quelque chose comme ceci.

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

Donc, comme vous pouvez le voir, ce serait un mélange de HTML et React components/JSX, représenté comme une chaîne

J'utiliserais Axios pour passer un appel pour obtenir le contenu (sur le serveur et le client en utilisant la méthode getInitialProps () de NextJS), alors je dois le rendre, mais je suis nouveau pour réagir et je peux voir quelques problèmes.

1) Dans React, JSX est compilé au moment de la construction, pas au moment de l'exécution, je ne vois pas comment contourner cela (Cela aurait été facile en Angular en utilisant le service $ compile par exemple) .

2) Comme nous ne savons pas de quels composants le contenu de Wordpress va utiliser, nous devons importer chacun d'eux en haut de la page, le contenu peut inclure un composant ou il peut inclure un composant, qui sait?.

En ce moment, je pense que ce n'est pas possible, ce qui signifierait que nous devrions reconsidérer l'utilisation de React, mais j'espère vraiment que quelqu'un aura une réponse.

Toute aide serait vraiment appréciée.

javascriptreactjsnext.jswp-api
12
jonhobbs

Problème intéressant!

Vous devriez essayer react-jsx-parser . Je pense que cela résout vos problèmes. Je ne sais pas comment cela fonctionne avec Next JS - Je n'ai aucune expérience avec Next JS.

Découvrez ce bac à sable: Edit 24r1ypp00p

Vous avez raison sur tous les composants fournis. Il existe une solution pour cela. :)

Découvrez ce bac à sable: Edit 24r1ypp00p

J'ai créé un dynamicComponent qui attend une promesse d'importation et renvoie un composant.

J'ai changé la façon dont les composants A, B et C sont importés dans index.js. De cette façon, chaque composant importé dynamiquement obtient un ensemble distinct et n'est demandé que lorsque cela est nécessaire.

Cela devrait résoudre votre deuxième problème.

6
bamse

Vous pouvez vous référer au lien ci-dessous

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Pour la partie React Components, vous pouvez rendre une chaîne de balisage HTML statique à l'aide de

https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

Mais assurez-vous que le code HTML que vous obtenez provient d'une source authentique et ne contiendra aucun script malveillant

0
Gokul