javascript - react - jsx element div has no corresponding closing tag

React.js: detener el procesamiento desde el desplazamiento hasta la parte superior de la página

Question

Cada vez que realiza un renderizado en React.js, la IU se desplaza a la parte superior de la página.

JSFiddle: http://jsfiddle.net/bengrunfeld/dcfy5xrd/

¿Alguna forma ingeniosa o reactiva de detener eso?

Por ejemplo, si un usuario se desplaza hacia abajo en la página, luego presiona un botón que causa un renderizado, la interfaz de usuario se mantendrá en la misma ubicación de desplazamiento que antes.

// Forces a render which scrolls to top of page
this.setState({data: data});

ACTUALIZACIÓN: ¿Por qué la UI se desplaza hacia arriba para algunos renders, pero no para otros?

Answer 1

@floydophone respondió este en Twitter.

https://twitter.com/floydophone/status/608129119025561600

@bengrunfeld @reactjs olvidaste preventDefault() en tus controladores de enlaces

Answer 2

Quería agregar aquí para aquellos que no están usando etiquetas de anclaje, preventDefault que preventDefault no lo guarde. Por extraño que sea, para mí estaba relacionado con la representación de los componentes de mi hijo dentro de un div con

display:table > display:tablecell

Por alguna razón, la posición de desplazamiento del componente secundario se pierde en esta situación cuando hay alguna repetición. El problema desapareció cuando cambié a flexbox (pantalla: flex).