React.js: empêche le rendu de défiler vers le haut de la page
Chaque fois que vous effectuez un rendu dans React.js, l'interface utilisateur défile vers le haut de la page.
JSFiddle: http://jsfiddle.net/bengrunfeld/dcfy5xrd/
Une manière astucieuse ou réactive pour arrêter cela?
Par exemple. Si un utilisateur fait défiler la page, puis appuie sur un bouton qui provoque un rendu, l'interface utilisateur resterait au même emplacement de défilement qu'auparavant.
// Forces a render which scrolls to top of page
this.setState({data: data});
MISE À JOUR: Pourquoi l'interface utilisateur défile-t-elle vers le haut pour certains rendus, mais pas pour d'autres?
@floydophone a répondu à celle-ci sur Twitter.
https://Twitter.com/floydophone/status/6081291190255616
@bengrunfeld @reactjs vous avez oublié
preventDefault()sur vos gestionnaires de liens
D'accord si quelqu'un lisait ceci, dans mon cas, le problème n'était pas ci-dessus. Vous devez essayer les premières suggestions ci-dessus de toute façon. J'ai tout fait, y compris preventDefault() mais ne m'a pas aidé. Le problème était; en utilisant styled-components. Parce que les composants de style donnent un nom de classe aléatoire à chaque rendu. Il réinitialise donc le défilement. J'ai donné le nom de classe de css et résolu mon problème.
Voulais ajouter ici pour ceux qui n'utilisent pas de balises d'ancrage, preventDefault ne vous sauvera pas. Aussi bizarre que cela soit, pour moi, c'était lié au rendu de mes composants enfants dans un div avec
display:table > display:tablecell
Pour une raison quelconque, la position de défilement du composant enfant est perdue dans cette situation lors d'un nouveau rendu. Le problème a disparu lorsque je suis passé à flexbox (display: flex).
Si le déclencheur de rendu défile vers le haut, cela signifie généralement qu'un composant d'interface utilisateur modifie sa dimension en raison de l'état, cela peut être corrigé en ajoutant une largeur/hauteur minimale