Ich möchte ein Chat-System erstellen und beim Betreten des Fensters und beim Eingang neuer Nachrichten automatisch nach unten scrollen. Wie scrollen Sie in React automatisch zum Ende eines Containers?
126
Wie Tushar erwähnt hat, können Sie einen Dummy-Div am Ende Ihres Chats behalten:
render () {
return (
<div>
<div className="MessageContainer" >
<div className="MessagesList">
{this.renderMessages()}
</div>
<div style={{ float:"left", clear: "both" }}
ref={(el) => { this.messagesEnd = el; }}>
</div>
</div>
</div>
);
}
und scrollen Sie dann immer dann dorthin, wenn Ihre Komponente aktualisiert wird (dh der Status wird aktualisiert, wenn neue Nachrichten hinzugefügt werden):
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}
componentDidMount() {
this.scrollToBottom();
}
componentDidUpdate() {
this.scrollToBottom();
}
Ich verwende hier die Standardmethode Element.scrollIntoView .
this.messagesEnd.scrollIntoView()
hat gut für mich funktioniert. Es bestand keine Notwendigkeit zu verwendenfindDOMNode()
.scrollToBottom(){this.scrollBottom.scrollIntoView({ behavior: 'smooth' })}
, damit sie in neueren VersionenIch möchte nur die Antwort aktualisieren, um sie an die neue
React.createRef()
Methode anzupassen , aber im Grunde ist es dieselbe. Denken Sie nur an diecurrent
Eigenschaft in der erstellten Referenz:AKTUALISIEREN:
Jetzt, da Hooks verfügbar sind, aktualisiere ich die Antwort, um die Verwendung von
useRef
und hinzuzufügenuseEffect
Hooks reale Sache, die die Magie ausführt (React Refs undscrollIntoView
DOM-Methode), bleibt dieselbe:Außerdem wurde eine (sehr einfache) Codesandbox erstellt, wenn Sie das Verhalten https://codesandbox.io/s/scrolltobottomexample-f90lz überprüfen möchten
quelle
this.messagesEnd.current
immer vorhanden. Es ist jedoch wichtig zu beachten, dass ein Aufrufthis.messagesEnd.current
vor dem ersten Rendern zu dem Fehler führt, auf den Sie hingewiesen haben. Danke.this.messagesEnd
in Ihrem ersten Beispiel in der scrollTo-Methode?useEffect
Methode muss mit platziert werden() => {scrollToBottom()}
. Trotzdem vielen DankVerwende nicht
findDOMNode
Klassenkomponenten mit ref
Funktionskomponenten mit Haken:
quelle
behavior
(kann nicht bearbeitet werden, da "Änderungen mindestens 6 Zeichen umfassen müssen", seufz).scrollIntoView
mitsmooth
ist im Moment sehr schlecht.Danke an @enlitement
Wir sollten die Verwendung vermeiden
findDOMNode
, wir können verwendenrefs
, um die Komponenten im Auge zu behaltenReferenz:
quelle
Sie können verwenden
ref
s die Komponenten verfolgen.Wenn Sie wissen, wie Sie
ref
eine einzelne Komponente (die letzte) einstellen können , posten Sie bitte!Folgendes hat für mich funktioniert:
quelle
Verweisen Sie auf Ihren Nachrichtencontainer.
Suchen Sie Ihren Nachrichtencontainer und machen Sie sein
scrollTop
Attribut gleichscrollHeight
:Rufen Sie die obige Methode auf
componentDidMount
und aufcomponentDidUpdate
.So verwende ich das in meinem Code:
quelle
React-Scrollable-Feed scrollt automatisch zum neuesten Element, wenn sich der Benutzer bereits am unteren Rand des scrollbaren Abschnitts befand. Andernfalls bleibt der Benutzer an derselben Position. Ich denke, das ist ziemlich nützlich für Chat-Komponenten :)
Ich denke, die anderen Antworten hier erzwingen jedes Mal einen Bildlauf, egal wo sich die Bildlaufleiste befand. Das andere Problem
scrollIntoView
ist, dass die gesamte Seite gescrollt wird, wenn Ihr scrollbares Div nicht angezeigt wurde.Es kann folgendermaßen verwendet werden:
Stellen Sie einfach sicher, dass Sie eine Wrapper-Komponente mit einem bestimmten
height
oder habenmax-height
Haftungsausschluss: Ich bin der Eigentümer des Pakets
quelle
Ich habe am Ende von Nachrichten ein leeres Element erstellt und zu diesem Element gescrollt. Keine Notwendigkeit, die Refs im Auge zu behalten.
quelle
Wenn Sie dies mit React Hooks tun möchten, können Sie dieser Methode folgen. Für einen Dummy wurde div am Ende des Chats platziert. Hier wird useRef Hook verwendet.
Hooks-API-Referenz: https://reactjs.org/docs/hooks-reference.html#useref
quelle
Der einfachste und beste Weg, den ich empfehlen würde, ist.
Meine ReactJS-Version: 16.12.0
HTML-Struktur innerhalb der
render()
FunktionscrollToBottom()
Funktion, die die Referenz des Elements erhält. und scrollen Sie nachscrollIntoView()
Funktion.und rufen Sie die obige Funktion in
componentDidMount()
und aufcomponentDidUpdate()
Weitere Erklärungen finden
Element.scrollIntoView()
Sie unter developer.mozilla.orgquelle
Ich konnte keine der folgenden Antworten zur Arbeit bekommen, aber einfache js haben den Trick für mich getan:
quelle
Arbeitsbeispiel:
Mit der DOM-
scrollIntoView
Methode können Sie eine Komponente in der Ansicht sichtbar machen.Geben Sie dazu beim Rendern der Komponente lediglich eine Referenz-ID für das DOM-Element mithilfe des
ref
Attributs an. Verwenden Sie dann die MethodescrollIntoView
für dencomponentDidMount
Lebenszyklus. Ich stelle gerade einen funktionierenden Beispielcode für diese Lösung ein. Das Folgende ist eine Komponente, die jedes Mal gerendert wird, wenn eine Nachricht empfangen wird. Sie sollten Code / Methoden zum Rendern dieser Komponente schreiben.Hier
this.props.message.MessageId
ist die eindeutige ID der jeweiligen Chat-Nachricht, die als übergeben wurdeprops
quelle
quelle
Ich mache es gerne so.
quelle
danke 'metakermit' für seine gute antwort, aber ich denke wir können es ein bisschen besser machen, für scrollen nach unten sollten wir folgendes verwenden:
Wenn Sie jedoch nach oben scrollen möchten, sollten Sie Folgendes verwenden:
und diese Codes sind üblich:
quelle
Als weitere Option lohnt es sich, die React Scroll- Komponente zu betrachten.
quelle
Verwenden von
React.createRef()
quelle
So würden Sie dies in TypeScript lösen (indem Sie den Verweis auf ein Zielelement verwenden, zu dem Sie scrollen):
Weitere Informationen zur Verwendung von ref mit React und Typescript finden Sie hier .
quelle
Vollversion (Typoskript):
quelle
Property 'scrollIntoView' does not exist on type 'RefObject<unknown>'.
Type 'HTMLDivElement | null' is not assignable to type 'RefObject<unknown>'. Type 'null' is not assignable to type 'RefObject<unknown>'.