У меня есть проблема, которую я понятия не имею, как решить. В моем компоненте реакции я отображаю длинный список данных и несколько ссылок внизу. После нажатия на любую из этих ссылок я заполняю список новой коллекцией ссылок и должен прокрутиться до самого верха.
Проблема в том, как прокрутить верхнюю панель после отображения новой коллекции.
'use strict';
// url of this component is #/:checklistId/:sectionId
var React = require('react'),
Router = require('react-router'),
sectionStore = require('./../stores/checklist-section-store');
function updateStateFromProps() {
var self = this;
sectionStore.getChecklistSectionContent({
checklistId: this.getParams().checklistId,
sectionId: this.getParams().sectionId
}).then(function (section) {
self.setState({
section,
componentReady: true
});
});
this.setState({componentReady: false});
}
var Checklist = React.createClass({
mixins: [Router.State],
componentWillMount: function () {
updateStateFromProps.call(this);
},
componentWillReceiveProps(){
updateStateFromProps.call(this);
},
render: function () {
if (this.state.componentReady) {
return(
<section className='checklist-section'>
<header className='section-header'>{ this.state.section.name } </header>
<Steps steps={ this.state.section.steps }/>
<a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
Next Section
</a>
</section>
);
} else {...}
}
});
module.exports = Checklist;
React.useEffect(() => { window.scrollTo(0, 0); }, []);
Обратите внимание, вы также можете импортировать useEffect напрямую:import { useEffect } from 'react'
Так как оригинальное решение было предоставлено для очень ранней версии реакции , вот обновление:
источник
ReactDOM.findDOMNode(this).scrollTop = 0
this is undefined in arrow functions
это неверно. Это ключевое слово связано с тем же контекстом, что и включающая функция developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Вы могли бы использовать что-то вроде этого. ReactDom предназначен для реагирования. Просто реагируй иначе.
Обновление 5/11/2019 для React 16+
источник
componentDidMount
это еще одна альтернатива.В React Routing существует проблема, заключающаяся в том, что если мы перенаправим на новый маршрут, то он автоматически не приведет вас к началу страницы.
Даже у меня была такая же проблема.
Я просто добавил одну строку в свой компонент, и он работал как масло.
Обратитесь: отреагируйте обучение
источник
Это может и, вероятно, должно быть обработано с помощью ссылок :
Пример кода:
источник
<div ref={(ref) => this._div = ref} />
в самом первом<div>
из моих заявлений рендеринга. Остальная часть моего рендера остается точно такой же.<div ref="main">
а потомthis.refs.main.scrollTop=0
Вы можете сделать это в маршрутизаторе следующим образом:
onUpdate={() => window.scrollTo(0, 0)}
Положить сверху прокрутки. Для получения дополнительной информации проверьте: ссылка codepenисточник
/somePage/:imgId
, он прокрутится вверх :(. Любой способ «контролировать», запускать или нет событие onUpdate для определенных маршрутов / параметров?onUpdate
его нет в подпорках HashRouter ... Если кто-то сталкивался с той же проблемой: я закончил тем, что использовал решение ScrollToTop, описанное ниже (и в документах о реагирующем маршрутизаторе), которое отлично сработало для меня.Для тех, кто использует хуки, будет работать следующий код.
Обратите внимание, вы также можете импортировать useEffect напрямую:
import { useEffect } from 'react'
источник
[]
В качестве второго средства параметров будет происходить только на первый рендер, вы пробовали без?Вот еще один подход, который позволяет вам выбрать, к каким смонтированным компонентам вы хотите восстановить положение прокрутки окна без массового дублирования ComponentDidUpdate / ComponentDidMount.
В приведенном ниже примере компонент Blog оборачивается функцией ScrollIntoView (), поэтому, если маршрут изменяется при монтировании компонента Blog, компонент ComponentDidUpdate для HOC обновит позицию прокрутки окна.
Вы можете так же легко обернуть его по всему приложению, чтобы при любом изменении маршрута он вызывал сброс окна.
ScrollIntoView.js
Routes.js
Приведенный выше пример прекрасно работает, но если вы перешли на
react-router-dom
, то вы можете упростить вышеприведенное, создав объект,HOC
который оборачивает компонент.Еще раз, вы также можете так же легко обернуть его на маршрутах (только изменения
componentDidMount
метода кcomponentDidUpdate
методу примера кода , написанного выше, а также обертываниеScrollIntoView
сwithRouter
).контейнеры / ScrollIntoView.js
компоненты / Home.js
источник
Это единственное, что сработало для меня (с компонентом класса ES6):
источник
Я использую ScrollToTop Component реагирует на маршрутизатор, код которого описан в документации по реагирующему маршрутизатору.
https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
Я изменяю код в одном файле маршрутов, и после этого нет необходимости менять код в каждом компоненте.
Пример кода -
Шаг 1 - создайте компонент ScrollToTop.js
Шаг 2 - В файле App.js добавьте компонент ScrollToTop после
<Router
источник
Крюковое решение :
источник
Использование хуков в функциональных компонентах, при условии, что компонент обновляется при обновлении в результате.
источник
use
Все вышеперечисленное не сработало для меня - не знаю почему, но:
работал, где HEADER - это идентификатор моего элемента заголовка
источник
Если все хотят сделать что-то простое, вот решение, которое будет работать для всех
добавить эту мини функцию
вызовите функцию следующим образом из нижнего колонтитула страницы
если вы хотите добавить хорошие стили здесь CSS
источник
Я использую React Hooks и хотел что-то повторно используемое, но также и то, что я мог бы вызвать в любое время (а не только после рендера).
Затем для использования крючка вы можете сделать:
источник
Если вы делаете это для мобильных устройств , по крайней мере, с хромом, вы увидите белую полосу внизу.
Это происходит, когда строка URL исчезает. Решение:
Документы для разработчиков Google
источник
Ни один из приведенных выше ответов в настоящее время не работает для меня. Оказывается, это
.scrollTo
не так широко совместимо, как.scrollIntoView
.В нашем App.js, в
componentWillMount()
мы добавилиЭто единственное решение, которое работает для нас повсеместно. root - это идентификатор нашего приложения. «Плавное» поведение не работает на каждом браузере / устройстве. Тайм-аут 777 немного консервативен, но мы загружаем много данных на каждую страницу, поэтому при тестировании это было необходимо. Короче 237 может работать для большинства приложений.
источник
Я столкнулся с этой проблемой, создав сайт с Gatsby, чья ссылка построена поверх Reach Router. Кажется странным, что это изменение, которое должно быть сделано, а не поведение по умолчанию.
В любом случае, я попробовал многие из приведенных выше решений, и единственное, что на самом деле мне помогло, было:
Я поместил это в useEffect, но вы могли бы так же легко поместить его в componentDidMount или вызвать его любым другим способом.
Не уверен, почему window.scrollTo (0, 0) не будет работать для меня (и других).
источник
Все решения говорят о добавлении прокрутки
componentDidMount
илиcomponentDidUpdate
с DOM.Я сделал все это и не работал.
Итак, выяснил какой-то другой способ, который прекрасно работает для меня.
Я также нашел о некоторых ScrollRestoration что , но сейчас я ленив. А пока оставим это в «DidUpdate».
Надеюсь, поможет!
быть в безопасности
источник
Этот код вызывает плавное поведение на свитке :
Вы можете передавать другие параметры внутри scrollIntoView (). Можно использовать следующий синтаксис:
alignToTop Необязательный Является логическим значением:
scrollIntoViewOptions Необязательно: Объект со следующими свойствами:
Более подробную информацию можно найти здесь: MDN документы
источник
Ни один из приведенных выше ответов в настоящее время не работает для меня. Оказывается, это
.scrollTo
не так широко совместимо, как.scrollIntoView
.В нашем App.js, в
componentWillMount()
мы добавилиЭто единственное решение, которое работает для нас повсеместно.
root
это идентификатор нашего приложения. «Плавное» поведение не работает на каждом браузере / устройстве. Тайм-аут 777 немного консервативен, но мы загружаем много данных на каждую страницу, поэтому при тестировании это было необходимо. Короче 237 может работать для большинства приложений.источник
Если я предполагаю, что вы воспроизводите главу, скажем, книгу на странице, все, что вам нужно сделать, это добавить это в свой код. Это сработало для меня как магия.
При этом вам не нужно создавать ссылку на визуализируемый компонент.
источник
Вот что я сделал:
источник
Вы можете использовать, это работает для меня.
источник
Как-то так у меня работало на компоненте:
Тогда в какой бы функции ни работал с обновлениями:
источник
Ничто не сработало для меня, но:
источник