codegouvfr / codegouvfr/react-dsfr

Problème d'hydratation React du composant Card

Aperta
#253 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
496
Fork
99
Merge medio
15h 36m
PR unite (30g)
4

Descrizione

Hello,

Quand on utilise le composant Card avec un contenu complexe, une erreur d'hydratation React apparaît dans Next (j'utilise Next 14). Next passe du coup en client side rendering et on perd le bénéfice des composants serveurs.

Le problème semble provenir du fait que le composant Card wrap le contenu de la prop `desc` dans un p. Or HTML ne permet pas de mettre des div dans des p. Du coup, il y une désynchro entre ce que Node rend en corrigeant le HTML a sa façon et ce que le browser rend en le corrigeant à la sienne.

Est-ce délibéré de wrap dans un p les props `desc`, `detail` et `endDetail` ?

Edit: je vois, les exemples du DSFR ne comportent que des p pour la partie description p. ex. et React DSFR a respecté ça. Je me demande si ça ne vaut pas le coup de légèrement dévier du DSFR pour ce cas car sinon, ça rend le composant Card inutilisable pour des composants relativement complexes.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with the Card component and reproduce the issue in Next 14 using complex content in the desc, detail, or endDetail props. Compare the server-rendered HTML with the browser result and verify that the completed change no longer causes a React hydration error while preserving the documented Card behavior.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
next.js, react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.