Mam problem, na który nie mam pomysłu, jak go rozwiązać. W moim komponencie reagowania wyświetlam długą listę danych i kilka linków na dole. Po kliknięciu któregokolwiek z tych linków wypełniam listę nowym zbiorem linków i muszę przewinąć do góry.
Problem w tym, jak przewinąć do góry po wyrenderowaniu nowej kolekcji?
'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); }, []);
Uwaga, możesz również importować useEffect bezpośrednio:import { useEffect } from 'react'
Ponieważ oryginalne rozwiązanie zostało dostarczone dla bardzo wczesnej wersji React , oto aktualizacja:
źródło
ReactDOM.findDOMNode(this).scrollTop = 0
this is undefined in arrow functions
jest nieprawidłowe. Słowo kluczowe this jest powiązane z tym samym kontekstem, co funkcja zamykająca developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Możesz użyć czegoś takiego. ReactDom służy do reagowania 14. Po prostu zareaguj inaczej.
Aktualizacja 5/11/2019 dla React 16+
źródło
componentDidMount
jest inna alternatywa.W React Routing jest problem polegający na tym, że jeśli przekierujemy na nową trasę, to nie przeniesie Cię to automatycznie na górę strony.
Nawet ja miałem ten sam problem.
Właśnie dodałem pojedynczą linię do mojego komponentu i działała jak masło.
Zobacz: trening reagowania
źródło
Można to i prawdopodobnie powinno być obsługiwane za pomocą referencji :
Przykładowy kod:
źródło
<div ref={(ref) => this._div = ref} />
w pierwszej<div>
części mojego renderowania. Reszta mojego renderowania pozostaje dokładnie taka sama.<div ref="main">
a potemthis.refs.main.scrollTop=0
Możesz to zrobić na routerze w ten sposób:
onUpdate={() => window.scrollTo(0, 0)}
Umieścić przewijania szczyt. Więcej informacji znajdziesz pod adresem : codepen linkźródło
/somePage/:imgId
, przewinie się on w górę :(. Każdy sposób "kontrolowania" uruchamiania, czy nie zdarzenie onUpdate na określonych trasach / parametrach?onUpdate
nie istnieje w rekwizytach HashRoutera ... Jeśli ktoś napotka ten sam problem: Skończyło się na rozwiązaniu ScrollToTop opisanym poniżej (iw dokumentacji react-router), które działało idealnie dla mnie.Poniższy kod będzie działał dla osób używających hooków.
Uwaga, możesz również bezpośrednio importować useEffect:
import { useEffect } from 'react'
źródło
[]
drugi parametr oznacza, że stanie się to tylko przy pierwszym renderowaniu, czy próbowałeś bez?Oto jeszcze jedno podejście, które pozwala wybrać zamontowane komponenty, do których pozycja przewijania okna ma zostać zresetowana bez masowego duplikowania ComponentDidUpdate / ComponentDidMount.
Poniższy przykład przedstawia opakowanie składnika Blog metodą ScrollIntoView (), tak że jeśli trasa zmieni się po zamontowaniu składnika Blog, to ComponentDidUpdate HOC zaktualizuje pozycję przewijania okna.
Możesz równie łatwo zawinąć go w całą aplikację, aby przy każdej zmianie trasy wyzwolił reset okna.
ScrollIntoView.js
Routes.js
Powyższy przykład działa świetnie, ale jeśli przeprowadziłeś migrację do
react-router-dom
, możesz uprościć powyższe, tworząc elementHOC
opakowujący komponent.Po raz kolejny, można też tak łatwo owinąć ją na swoje trasy (tylko zmiana
componentDidMount
sposobu nacomponentDidUpdate
przykład kod metody pisemnej powyżej, jak również zawijaniaScrollIntoView
zwithRouter
).kontenery / ScrollIntoView.js
komponenty / Home.js
źródło
To jedyna rzecz, która u mnie zadziałała (z komponentem klasy ES6):
źródło
Używam komponentu React-router ScrollToTop, którego kod opisano w dokumentach reagujących na router
https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
Zmieniam kod w jednym pliku Routes i po tym nie ma potrzeby zmiany kodu w każdym komponencie.
Przykładowy kod -
Krok 1 - Utwórz składnik ScrollToTop.js
Krok 2 - W pliku App.js dodaj komponent ScrollToTop po
<Router
źródło
Rozwiązanie haczykowe :
źródło
Używanie hooków w komponentach funkcjonalnych, przy założeniu, że komponent aktualizuje się, gdy istnieje aktualizacja właściwości wyniku
źródło
use
Wszystkie powyższe nie zadziałały dla mnie - nie wiem dlaczego, ale:
zadziałało, gdzie HEADER to identyfikator mojego elementu nagłówka
źródło
Jeśli wszyscy chcą zrobić coś prostego, oto rozwiązanie, które będzie działać dla każdego
Dodaj tę mini funkcję
wywołaj funkcję w następujący sposób ze stopki strony
jeśli chcesz dodać ładne style, tutaj jest css
źródło
Używam haków React i chciałem czegoś do ponownego użycia, ale także czegoś, co mógłbym wywołać w dowolnym momencie (zamiast zaraz po renderowaniu).
Następnie, aby użyć haka, możesz:
źródło
Jeśli robisz to na telefonie komórkowym , przynajmniej z Chrome, na dole zobaczysz biały pasek.
Dzieje się tak, gdy pasek adresu URL znika. Rozwiązanie:
Dokumenty Google Developer
źródło
Żadna z powyższych odpowiedzi nie działa obecnie dla mnie. Okazuje się, że
.scrollTo
nie jest to tak szeroko kompatybilne jak.scrollIntoView
.W naszym App.js
componentWillMount()
dodaliśmyTo jedyne rozwiązanie, które działa dla nas uniwersalnie. root to identyfikator naszej aplikacji. „Płynne” zachowanie nie działa na każdej przeglądarce / urządzeniu. Limit czasu 777 jest nieco konserwatywny, ale ładujemy wiele danych na każdej stronie, więc podczas testów było to konieczne. Krótszy 237 może działać w przypadku większości aplikacji.
źródło
Natknąłem się na ten problem podczas tworzenia witryny z Gatsby, którego łącze jest zbudowane na routerze Reach. Wydaje się dziwne, że jest to modyfikacja, którą należy wprowadzić, a nie domyślne zachowanie.
W każdym razie wypróbowałem wiele powyższych rozwiązań i jedynym, które faktycznie działało, było:
Umieściłem to w useEffect, ale równie łatwo można było umieścić go w komponencie componentDidMount lub uruchomić w inny sposób.
Nie wiem, dlaczego window.scrollTo (0, 0) nie działa dla mnie (i innych).
źródło
Wszystkie rozwiązania mówią o dodaniu przewijania na
componentDidMount
lubcomponentDidUpdate
ale z DOM.Zrobiłem to wszystko i nie zadziałałem.
Więc znalazłem inny sposób, który działa dobrze dla mnie.
Znalazłem też coś o ScrollRestoration , ale teraz jestem leniwy. I na razie zachowam to w stylu „DidUpdate”.
Mam nadzieję, że to pomoże!
bądź bezpieczny
źródło
Ten kod spowoduje płynne zachowanie na przewijaniu :
Możesz przekazać inne parametry wewnątrz scrollIntoView (). Można użyć następującej składni:
alignToTop Opcjonalne jest wartością logiczną:
scrollIntoViewOptions Opcjonalne jest obiektem z następującymi właściwościami:
Więcej szczegółów można znaleźć tutaj: Dokumentacja MDN
źródło
Żadna z powyższych odpowiedzi nie działa obecnie dla mnie. Okazuje się, że
.scrollTo
nie jest to tak szeroko kompatybilne jak.scrollIntoView
.W naszym App.js
componentWillMount()
dodaliśmyTo jedyne rozwiązanie, które działa dla nas uniwersalnie.
root
to identyfikator naszej aplikacji. „Płynne” zachowanie nie działa na każdej przeglądarce / urządzeniu. Limit czasu 777 jest nieco konserwatywny, ale ładujemy wiele danych na każdej stronie, więc podczas testów było to konieczne. Krótszy 237 może działać w przypadku większości aplikacji.źródło
Jeśli przyjmuję, że renderujesz, powiedzmy, rozdział, książkę na stronę, wszystko, co musisz zrobić, to dodać to do swojego kodu. To zadziałało na mnie jak magia.
Dzięki temu nie ma potrzeby tworzenia odwołania do renderowanego komponentu.
źródło
Oto co zrobiłem:
źródło
Możesz użyć, to działa dla mnie.
źródło
Coś takiego zadziałało dla mnie na komponencie:
Następnie w dowolnej funkcji zajmującej się aktualizacjami:
źródło
Nic nie działało, ale:
źródło