React - pobierz rozmiar komponentu przed renderowaniem

W tym artykule przyjrzymy się, jak uzyskać rozmiar komponentu przed renderowaniem.

Uwagi:

• Prosta implementacja komponentu AutoSizer - link,
• Zewnętrzna biblioteka, która udostępnia komponent AutoSizer - link.

1. Uzyskanie rozmiaru elementu za pomocą komponentu funkcyjnego 

W tym przykładzie do uzyskania aktualnego rozmiaru elementu użyjemy funkcji useRef z atrybutem ref.

Komponent Container jest stworzony w oparciu o komponenty funkcyjne.

// ONLINE-RUNNER:browser;

// Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// 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 />
				- szerokość: {dimensions.width}<br />
				- wysokość: {dimensions.height}
			</pre>
		</div>
	);
};

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

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

2. Pobieranie rozmiaru elementu za pomocą komponentu klasowego

W tym przykładzie atrybut ref jest używany do pobrania referencji elementu.

Komponent Container jest stworzony w oparciu o komponenty klasowe.

// ONLINE-RUNNER:browser;

// Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// 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 />
					- szerokość: {dimensions && dimensions.width}<br />
					- wysokość: {dimensions && dimensions.height}
				</pre>
			</div>
		);
	}
}

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

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