Languages
[Edit]
PL

React - pobierz rozmiar komponentu przed renderowaniem

3 points
Created by:
Dirask JS Member
3430

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 );

ReactJS (PL)

React - pobierz rozmiar komponentu przed renderowaniem
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join