Comment récupérer la chaine de charactères HTML d'un composant React
Emmanuel Gautier / May 02, 2021
1 min read
Dans plusieurs cas, vous pourriez avoir besoin d'avoir la chaine de charactères représentant le HTML généré plutôt que le composant React.
Le moyen le plus simple est d'utiliser la fonction renderToString du package react-dom :
import { renderToString } from 'react-dom/server'
renderToString(<YourAwesomeComponent props1="value1" props2={{ value: '2' }} />)
La fonction renderToString peut être utilisée côté serveur et côté client.
Si vous souhaitez rendre l'ensemble de la page pour des raisons SEO ou d'UX par exemple, vous pouvez également utiliser la fonction renderToNodeStream pour améliorer le temps de chargement de la page.
Plus d'informations sur la documentation de React.
Consulting
Si vous recherchez des solutions à un problème ou avez besoin de conseils, je suis là pour vous aider ! N'hésitez pas à réserver un call avec moi pour une session de consulting personnalisée. Discutons de votre situation et trouvons ensemble la meilleure solution à implémenter.
Articles sur le même sujet
Etendre le type Window avec Typescript
Certaine des propriétés et fonctions du type Window avec Typescript, ne sont pas disponibles. Ce post a pour but d'expliquer comme étendre le type Window avec les propriétés manquantes.
Etendre le type Window avec Typescript
Certaine des propriétés et fonctions du type Window avec Typescript, ne sont pas disponibles. Ce post a pour but d'expliquer comme étendre le type Window avec les propriétés manquantes.
Starter Gatsby + Netlify CMS + TailwindCSS
Avec le nombre de sites web generés avec les mêmes outils, j'essaie au maximum de mutualiser l'effort de maintenance de la stack technique commune. Suivant ce principe, je viens de créer un starter qui vient du développement de mes autres sites.
Articles mis en avant
Comment activer la vérification de typage pour Python dans VSCode
Python supporte désormais le [type hints](https://docs.python.org/3/library/typing.html). Dans cet article, nous allons voir comment avoir de l'IntelliSense pour le typage ainsi qu'avoir les erreurs de typage sur Visual Studio Code.
Comment gérer l'internationalisation avec NextJS SSG
Générer statiquement un site avec le framework NextJS pour différentes langues n'est pas si simple.
Utilisateurs et privilèges sous MySQL
L'administration d'une base de données inclue la gestion des utilisateurs et de leurs privilèges. La plupart du temps, une interface graphique, telle que MySQL Workbench ou PHPMyAdmin, est disponible pour réaliser de façon simple les actions liées à cette gestion. Dans ce tutoriel, nous allons voir comment réaliser la gestion des utilisateurs MySQL au moyen de requêtes SQL.