React - Herunterladen der Komponentengröße vor dem Rendern

In diesem Artikel wird gezeigt, wie man die Komponentengröße vor dem Rendern enthalten kann.

Hinweise:

• Einfache Komponentenimplementierung AutoSizer - Link,
• Externe Bibliothek, die die Komponente zur Verfügung stellt AutoSizer - Link.

1. Die Größe eines Elements mit einer Funktionskomponente erhalten

In diesem Beispiel wird die Funktion useRef mit dem Attribut ref verwendet, um die aktuelle Größe der Komponente zu erhalten. 

Die Container-Komponente ist auf Funktionskomponenten aufgebaut.

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// import React from 'react';
// import ReactDOM from 'react-dom';

const Container = props => {
	const reference = React.useRef();
	const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
	React.useEffect(() => {
		if (reference.current) {
			setDimensions({
				width: reference.current.offsetWidth,
				height: reference.current.offsetHeight
			});
		}
	}, []);
	return (
		<div ref={reference}>
			<pre>
				Container:<br />
				- Breite: {dimensions.width}<br />
				- Höhe: {dimensions.height}
			</pre>
		</div>
	);
};

const App = () => (
	<div style={{background: '#e1e1e1', width: '400px'}}>
		<h1>Meine Webseite!</h1>
		<Container />
	</div>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

2. Die Größe eines Elements mit hilfe einer Klassenkomponenten herunterladen

In diesem Beispiel wird das Attribut ref verwendet, um die Referenz der Komponente herunterzuladen.

Die Container-Komponente ist auf Klassenkomponenten aufgebaut.

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// import React from 'react';
// import ReactDOM from 'react-dom';

class Container extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			dimensions: null
		};
	}
	componentDidMount() {
		setTimeout(() => this.update());
	}
	update() {
		this.setState({
			dimensions: {
				width: this.container.offsetWidth,
				height: this.container.offsetHeight,
			}
		});
	}
	render() {
		const { dimensions } = this.state;
		return (
			<div ref={e => (this.container = e)}>
				<pre>
					Container:<br />
					- Breite: {dimensions && dimensions.width}<br />
					- Höhe: {dimensions && dimensions.height}
				</pre>
			</div>
		);
	}
}

const App = () => (
	<div style={{background: '#e1e1e1', width: '400px'}}>
		<h1>Meine Webseite!</h1>
		<Container />
	</div>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );