[Edit]

React - pobierz rozmiar komponentu przed renderowaniem

1 contributors

2 contributions

0 discussions

3 points

Created by:

Anisha-Kidd

652

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

Edit

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.

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

Auto running

2. Pobieranie rozmiaru elementu za pomocą komponentu klasowego

Edit

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

Komponent Container jest stworzony w oparciu o komponenty klasowe.

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