Wie kann ich die Höhe eines Elements ermitteln, nachdem React dieses Element gerendert hat?
HTML
<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>
ReactJS
var DivSize = React.createClass({
render: function() {
let elHeight = document.getElementById('container').clientHeight
return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
}
});
ReactDOM.render(
<DivSize />,
document.getElementById('container')
);
ERGEBNIS
Size: 36px but it should be 18px after the render
Es berechnet die Containerhöhe vor dem Rendern (36px). Ich möchte die Höhe nach dem Rendern erhalten. Das richtige Ergebnis sollte in diesem Fall 18px sein. jsfiddle
javascript
reactjs
faia20
quelle
quelle
setState
den Höhenwert einer Statusvariablen zuweisen.Antworten:
Sehen Sie diese Geige (tatsächlich aktualisiert Ihre)
Sie müssen sich einbinden, in
componentDidMount
das nach der Rendermethode ausgeführt wird. Dort erhalten Sie die tatsächliche Höhe des Elements.quelle
Es folgt ein aktuelles ES6-Beispiel mit einer Referenz .
Denken Sie daran, dass wir eine React-Klassenkomponente verwenden müssen, da wir auf die Lifecycle-Methode zugreifen müssen,
componentDidMount()
da wir die Höhe eines Elements erst bestimmen können, nachdem es im DOM gerendert wurde.Das laufende Beispiel finden Sie hier: https://codepen.io/bassgang/pen/povzjKw
quelle
<div ref={ divElement => this.divElement = divElement}>{children}</div>
löst "[eslint] Arrow-Funktion sollte keine Zuweisung zurückgeben. (No-return-this.setState({ height });
assign )" und wirft "[eslint] Verwenden Sie setState nicht in componentDidMount (react / no- did-mount-set-state) ". Hat jemand eine Styleguide-konforme Lösung?ref={ divElement => {this.divElement = divElement}}
componentDidUpdate
auch verwenden , wenn Sie die Größe des Elements nach der Aktualisierung des Elements erhalten möchten .Für diejenigen, die an der Verwendung interessiert sind
react hooks
, kann dies den Einstieg erleichtern.quelle
useLayoutEffect
anstelle von verwendenuseEffect
? Die Dokumente scheinen darauf hinzudeuten, dass wir sollten. Siehe den Abschnitt "Tipp" hier: reactjs.org/docs/hooks-effect.html#detailed-explanation (2) In diesen Fällen, in denen wir nur einen Verweis auf ein untergeordnetes Element benötigen, sollten wiruseRef
stattdessen verwendencreateRef
? Die Dokumente scheinen darauf hinzuweisen,useRef
dass dies für diesen Anwendungsfall besser geeignet ist. Siehe: reactjs.org/docs/hooks-reference.html#userefuseLayoutEffect
Nachdem ich die anderen Kommentare hier gelesen hatte , ging ich mit . Scheint gut zu funktionieren. :)useEffect(() => setDimensions({width: popup.current.clientWidth, height: popup.current.clientHeight}))
, und meine IDE (WebStorm) hat mir Folgendes vorgeschlagen: ESLint: React Hook useEffect enthält einen Aufruf von 'setDimensions'. Ohne eine Liste von Abhängigkeiten kann dies zu einer unendlichen Kette von Aktualisierungen führen. Um dies zu beheben, übergeben Sie [] als zweites Argument an den useEffect-Hook. (React-Hooks / erschöpfende Deps) , also[]
als zweites Argument an IhreuseEffect
Sie möchten auch Refs für das Element verwenden, anstatt es zu verwenden
document.getElementById
. Es ist nur eine etwas robustere Sache.quelle
angularJs
undreact
während Sie von einem zum anderen migrieren? Es gibt Fälle, in denen eine direkte DOM-Manipulation wirklich erforderlich istMeine 2020 (oder 2019) Antwort
nutzen Sie Ihre Fantasie lassen , was hier (WidgetHead) fehlt,
reactstrap
ist etwas , das Sie auf npm finden: ersetzeninnerRef
mitref
einem Vermächtnis dom Element (sagen a<div>
).useEffect oder useLayoutEffect
Der letzte soll für Änderungen synchron sein
useLayoutEffect
(oderuseEffect
) zweites ArgumentDas zweite Argument ist ein Array und wird überprüft, bevor die Funktion im ersten Argument ausgeführt wird.
ich benutzte
Da mir.current vor dem Rendern null ist und dies eine gute Sache ist, die nicht überprüft werden sollte,
myself.current.clientHeight
möchte ich den zweiten Parameter am Ende auf Änderungen überprüfen.was ich hier löse (oder zu lösen versuche)
Ich löse hier das Problem des Widgets in einem Raster, das seine Höhe nach eigenem Willen ändert, und das Rastersystem sollte elastisch genug sein , um zu reagieren ( https://github.com/STRML/react-grid-layout ).
quelle
useLayoutEffect
und tatsächlichem Div, um den Schiedsrichter zu binden.Verwendung mit Haken:
Diese Antwort wäre hilfreich, wenn sich Ihre Inhaltsdimension nach dem Laden ändert.
onreadystatechange : Tritt auf, wenn sich der Ladezustand der Daten, die zu einem Element oder einem HTML-Dokument gehören, ändert. Das Ereignis onreadystatechange wird in einem HTML-Dokument ausgelöst, wenn sich der Ladezustand des Seiteninhalts geändert hat.
Ich habe versucht, mit einem eingebetteten YouTube-Videoplayer zu arbeiten, dessen Abmessungen sich nach dem Laden ändern können.
quelle
Ich fand nützliches npm-Paket https://www.npmjs.com/package/element-resize-detector
Ein optimierter browserübergreifender Listener für die Größenänderung von Elementen.
Kann mit React-Komponente oder Funktionskomponente verwendet werden (besonders nützlich für React-Hooks)
quelle
Hier ist ein weiteres, wenn Sie ein Ereignis zum Ändern der Fenstergröße benötigen:
Codestift
quelle
Eine alternative Lösung: Wenn Sie die Größe eines React-Elements synchron abrufen möchten, ohne das Element sichtbar rendern zu müssen, können Sie ReactDOMServer und DOMParser verwenden .
Ich verwende diese Funktion, um die Höhe eines Renderers für meine Listenelemente zu ermitteln, wenn ich das React -Fenster ( React-Virtualized ) verwende, anstatt die erforderliche
itemSize
Requisite für eine FixedSizeList fest zu codieren .utilities.js:
quelle