Ich habe ein Chat-Widget, das bei jedem Bildlauf eine Reihe von Nachrichten abruft. Das Problem, mit dem ich jetzt konfrontiert bin, ist, dass der Schieberegler beim Laden von Nachrichten oben fixiert bleibt. Ich möchte, dass es sich auf das letzte Indexelement aus dem vorherigen Array konzentriert. Ich habe herausgefunden, dass ich dynamische Refs erstellen kann, indem ich den Index übergebe, aber ich müsste auch wissen, welche Art von Bildlauffunktion ich verwenden muss, um dies zu erreichen
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
javascript
reactjs
ecmascript-6
edmamerto
quelle
quelle
Antworten:
Reaktion 16.8 +, Funktionskomponente
Klicken Sie hier für eine vollständige Demo zu StackBlits
Reagiere 16.3 +, Klassenkomponente
Klassenkomponente - Ref-Rückruf
Verwenden Sie keine String-Refs.
String-Refs beeinträchtigen die Leistung, sind nicht zusammensetzbar und befinden sich auf dem Weg nach draußen (August 2018).
resource1 resource2
Optional: Glätten Sie die Scroll-Animation
Ref an ein Kind weitergeben
Wir möchten, dass der ref an ein dom-Element angehängt wird, nicht an eine Reaktionskomponente. Wenn wir es also an eine untergeordnete Komponente übergeben, können wir die Requisitenreferenz nicht benennen.
Befestigen Sie dann die Ref-Stütze an einem Dom-Element.
quelle
window.scrollTo(0, offsetTop)
ist eine bessere Option mit besserer Unterstützung unter den aktuellen Browserndas hat bei mir funktioniert
EDIT: Ich wollte dies basierend auf den Kommentaren erweitern.
quelle
Suchen Sie einfach die oberste Position des Elements, das Sie bereits bestimmt haben: https://www.w3schools.com/Jsref/prop_element_offsettop.asp, und scrollen Sie dann über die
scrollTo
Methode https://www.w3schools.com/Jsref/met_win_scrollto.asp zu dieser PositionSo etwas sollte funktionieren:
AKTUALISIEREN:
da Reagieren v16.3 die
React.createRef()
bevorzugtquelle
ReactDOM.findDomNode()
ist eine bessere Vorgehensweise - da React Komponenten neu rendert, ist ein Div, das Sie einfach anhand seiner ID erhalten, möglicherweise nicht vorhanden, wenn Sie die Funktion aufrufenfindDOMNode
. In den meisten Fällen können Sie dem DOM-Knoten eine Referenz hinzufügen und die VerwendungfindDOMNode
überhaupt vermeiden .this.myRef.current.scrollIntoView()
statt verwendenwindow.scrollTo(0, this.myRef)
.Die Verwendung von findDOMNode wird irgendwann veraltet sein.
Die bevorzugte Methode ist die Verwendung von Rückrufreferenzen.
Github Eslint
quelle
Sie können jetzt die
useRef
React Hook-API verwendenhttps://reactjs.org/docs/hooks-reference.html#useref
Erklärung
Komponente
Verwenden
quelle
console.log
dass es Ihrewindow.scrollTo
Anweisung ausführt (angepasst für meinen Fall), aber dennoch nicht scrollt. Könnte dies mit der Tatsache zusammenhängen, dass ich ein React Bootstrap Modal verwende?Sie können auch eine
scrollIntoView
Methode verwenden, um zu einem bestimmten Element zu scrollen.quelle
Ich bin vielleicht zu spät zur Party gekommen, aber ich habe versucht, dynamische Refs auf die richtige Weise in mein Projekt zu implementieren, und alle Antworten, die ich bis dahin gefunden habe, sind nicht ganz zufriedenstellend für meinen Geschmack. Deshalb habe ich eine Lösung gefunden, die ich für richtig halte einfach und verwendet die native und empfohlene Reaktionsweise, um die Referenz zu erstellen.
Manchmal stellen Sie fest, dass die Art und Weise, wie die Dokumentation geschrieben wird, davon ausgeht, dass Sie über eine bekannte Anzahl von Ansichten verfügen. In den meisten Fällen ist diese Anzahl unbekannt. In diesem Fall benötigen Sie eine Möglichkeit, das Problem zu lösen. Erstellen Sie dynamische Verweise auf die unbekannte Anzahl von Ansichten, die Sie benötigen in der Klasse zu zeigen
Die einfachste Lösung, die ich mir vorstellen konnte und die einwandfrei funktionierte, war Folgendes
Auf diese Weise wechselt die Schriftrolle zu der gewünschten Zeile.
Prost und hoffe, es hilft anderen
quelle
Jul 2019 - Dedizierter Haken / Funktion
Ein dedizierter Hook / eine dedizierte Funktion kann Implementierungsdetails verbergen und bietet Ihren Komponenten eine einfache API.
Reagiere 16.8 + Funktionskomponente
Verwenden Sie es in jeder Funktionskomponente.
vollständige Demo
Reagiere 16.3 + Klassenkomponente
Verwenden Sie es in einer beliebigen Klassenkomponente.
Vollständige Demo
quelle
Sie könnten es so versuchen:
quelle
Sie können so etwas wie verwenden
componentDidUpdate
quelle
Ich hatte ein einfaches Szenario: Wenn der Benutzer auf den Menüpunkt in meiner Navigationsleiste für die Material-Benutzeroberfläche klickt, möchte ich ihn zu dem Abschnitt auf der Seite scrollen. Ich könnte Refs verwenden und sie durch alle Komponenten fädeln, aber ich hasse es, Requisiten mit mehreren Komponenten zu fädeln, weil dies den Code zerbrechlich macht.
Ich habe gerade Vanilla JS in meiner Reaktionskomponente verwendet, es stellt sich heraus, dass es gut funktioniert. Platzierte eine ID auf dem Element, zu dem ich scrollen wollte, und in meiner Header-Komponente habe ich dies einfach getan.
quelle
Folge diesen Schritten:
1) Installieren:
2) Importieren Sie das Paket:
3) Verwendung:
quelle
Hier ist das Code-Snippet für Klassenkomponenten, mit dem Sie dieses Problem lösen können:
Dieser Ansatz verwendet die Referenz und scrollt auch reibungslos zur Zielreferenz
quelle
Was hat bei mir funktioniert:
quelle
Nur ein Kopf hoch, ich konnte diese Lösungen nicht dazu bringen, an Material UI-Komponenten zu arbeiten. Sieht so aus, als hätten sie das nicht
current
Grundstück nicht.Ich habe gerade ein Leerzeichen
div
unter meinen Komponenten hinzugefügt und die Ref-Requisite darauf gesetzt.quelle
quelle
Für alle anderen Leser, die mit den oben genannten Lösungen nicht viel Glück hatten oder nur eine einfache Drop-In-Lösung wünschen, hat dieses Paket für mich funktioniert: https://www.npmjs.com/package/react-anchor-link- glattes Scrollen . Viel Spaß beim Hacken!
quelle
Ich habe dies in einer Onclick-Funktion verwendet, um reibungslos zu einem Div zu scrollen, dessen ID "step2Div" ist.
quelle
Der schönste Weg ist zu benutzen
element.scrollIntoView({ behavior: 'smooth' })
. Dadurch wird das Element mit einer schönen Animation angezeigt.Wenn Sie es mit React's kombinieren
useRef()
, können Sie wie folgt vorgehen.Wenn Sie zu einer React-Komponente scrollen möchten, müssen Sie den Verweis an das gerenderte Element weiterleiten. Dieser Artikel wird tiefer in das Problem eintauchen .
quelle