React.js: Остановка рендеринга от прокрутки до верхней части страницы

Каждый раз, когда вы выполняете рендер в React.js, пользовательский интерфейс прокручивается до верхней части страницы.

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

Любой отличный или реактивный способ остановить это?

например. Если пользователь прокручивает страницу вниз, то нажатие кнопки, которая вызывает Render, пользовательский интерфейс останется в том же месте прокрутки, что и раньше.

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

UPDATE: почему пользовательский интерфейс прокручивается вверху для некоторых рендерингов, но не других?

Ответ 1

@floydophone ответил на этот вопрос в Twitter.

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

@bengrunfeld @reactjs вы забыли preventDefault() в обработчиках ссылок

Ответ 2

Хорошо, если кто-то прочитал это, в моем случае проблема не была выше. Вы должны попробовать первые предложения выше любым способом. Я сделал все, включая preventDefault(), но не помог мне. Проблема была; используя styled-components. Потому что styled-компоненты дают случайное имя класса при каждом рендере. Таким образом, он сбрасывает свиток. Я дал название класса из css и решил мою проблему.

Ответ 3

Требуется добавить сюда тех, кто не использует метки привязки, preventDefault не сохранит вас. Как ни странно, для меня это было связано с предоставлением моих дочерних компонентов внутри div с помощью

display:table > display:tablecell

По какой-то причине позиция прокрутки дочернего компонента теряется в этой ситуации при повторной рендеринге. Проблема исчезла, когда я переключился на flexbox (display: flex).

Ответ 4

Если прокрутить триггер рендеринга вверх, это обычно означает, что какой-то компонент пользовательского интерфейса меняет свое измерение из-за состояния, это можно исправить, добавив минимальную ширину/высоту.