Wie erhalte ich die Höhe des Ansichtsfensters in ReactJS? In normalem JavaScript verwende ich
window.innerHeight()
Bei Verwendung von ReactJS bin ich mir jedoch nicht sicher, wie ich diese Informationen erhalten soll. Mein Verständnis ist das
ReactDOM.findDomNode()
funktioniert nur für erstellte Komponenten. Dies ist jedoch nicht der Fall für das Element document
oder body
, das mir die Höhe des Fensters geben könnte.
javascript
reactjs
window
viewport
Jabran Saeed
quelle
quelle
.bind(this)
aus den Rückrufargumenten entfernen, da diese bereits vom Konstruktor gebunden sind.this.state = { width: 0, height: 0 };
so sein, dass Statusvariablen ihren Typ nicht ändern (wenn ich richtig verstehe, ist window.innerWidth eine Ganzzahl ). Ändert nichts außer erleichtert das Verständnis des Codes IMHO. Danke für die Antwort!this.state = { width: window.innerWidth, height: window.innerHeight };
anfangen?Haken verwenden (reagieren
16.8.0+
)Erstellen Sie einen
useWindowDimensions
Haken.Und danach können Sie es in Ihren Komponenten so verwenden
Arbeitsbeispiel
Ursprüngliche Antwort
In React ist es dasselbe, mit dem Sie
window.innerHeight
die Höhe des aktuellen Ansichtsfensters abrufen können.Wie Sie hier sehen können
quelle
cleanup
Funktion, Sie können darüber hierreq
Requisite verfügbar istgetInitialProps
. Wenn dies der Fall ist, wird es auf dem Server ausgeführt, und Sie haben keine Fenstervariablen.quelle
height: window.innerHeight || props.height
. Dies vereinfacht nicht nur den Code, sondern entfernt auch unnötige Statusänderungen.componentWillMount
wird nicht mehr empfohlen, siehe reactjs.org/docs/react-component.html#unsafe_componentwillmountIch habe gerade bearbeitet QoP ‚s aktuelle Antwort zu unterstützen SSR und verwenden Sie es mit Next.js (React 16.8.0+):
/hooks/useWindowDimensions.js :
/yourComponent.js :
quelle
Die Antwort von @speckledcarp ist großartig, kann aber mühsam sein, wenn Sie diese Logik in mehreren Komponenten benötigen. Sie können es als HOC (Komponente höherer Ordnung) umgestalten. , um die Wiederverwendung dieser Logik zu vereinfachen.
withWindowDimensions.jsx
Dann in Ihrer Hauptkomponente:
Sie können HOCs auch "stapeln", wenn Sie andere haben, die Sie verwenden müssen, z
withRouter(withWindowDimensions(MyComponent))
Bearbeiten: Ich würde heutzutage mit einem React-Hook arbeiten ( Beispiel oben hier ), da sie einige der fortgeschrittenen Probleme mit HOCs und Klassen lösen
quelle
Ich habe gerade einige Zeit damit verbracht, einige Dinge mit React herauszufinden und Ereignisse / Positionen zu scrollen. Für diejenigen, die noch suchen, habe ich Folgendes gefunden:
Die Höhe des Ansichtsfensters kann mithilfe von window.innerHeight oder mithilfe von document.documentElement.clientHeight ermittelt werden. (Aktuelle Höhe des Ansichtsfensters)
Die Höhe des gesamten Dokuments (Körpers) kann mit window.document.body.offsetHeight ermittelt werden.
Wenn Sie versuchen, die Höhe des Dokuments zu ermitteln und wissen, wann Sie den unteren Rand erreicht haben, habe ich Folgendes gefunden:
(Meine Navigationsleiste war 72px in fester Position, daher die -72, um einen besseren Auslöser für Scroll-Ereignisse zu erhalten.)
Zuletzt finden Sie hier eine Reihe von Bildlaufbefehlen für console.log (), mit denen ich meine Mathematik aktiv herausfinden konnte.
Wütend! Hoffe es hilft jemandem!
quelle
Die Antworten von @speckledcarp und @Jamesl sind beide brillant. In meinem Fall benötigte ich jedoch eine Komponente, deren Höhe die gesamte Fensterhöhe erweitern konnte, abhängig von der Renderzeit. Durch Aufrufen eines HOC innerhalb wird
render()
der gesamte Teilbaum erneut gerendert. BAAAD.Außerdem war ich nicht daran interessiert, die Werte als Requisiten zu erhalten, sondern wollte einfach einen Elternteil
div
, der die gesamte Bildschirmhöhe (oder -breite oder beides) einnimmt.Also habe ich eine übergeordnete Komponente geschrieben, die ein Div mit voller Höhe (und / oder Breite) bereitstellt. Boom.
Ein Anwendungsfall:
Hier ist die Komponente:
quelle
quelle
Sie können dies auch versuchen:
quelle