/ / Získajte výšku komponentu v Reacte - reakciu, dom-uzol

Získajte výšku komponentu v reakcii - reakjs, dom-node

Mám 4 stĺpce, ktorých výška nie je pevná,a potrebujem nájsť výšku týchto stĺpcov, aby bolo možné nastaviť výšku najväčšieho stĺpca na ostatné tri. Ako to môžem urobiť s Reactom a nepoužívať „minHeight“ css?

Som nováčik v Reacte a najbližšia otázka, ktorú som tu našiel, bola ReactJS získa výšku vykresleného komponentu.

Tiež som našiel toto odkaz, ktorý hovorí, že sa to dá dosiahnuť získaním DOMNode a použitím odkazov, ale ja som bez úspechu.

odpovede:

3 pre odpoveď č. 1

Môžete jednoducho použiť ref spätné volanie a prístup k DOMNode vo vnútri.

class Example extends React.Component {

constructor(props) {
super(props);
this.state = {
height: null
};
this.columns = ["hello",
"this is a bit more text",
"this is a bit more text ... and even more"];
}

render(){
return <div ref={(node) => this.calcHeight(node)}>
{
this.columns.map((column) => {
return <div style={{height: this.state.height}}>{column}</div>
})
}
</div>;
}
calcHeight(node) {
if (node && !this.state.height) {
this.setState({
height: node.offsetHeight
});
}
}
}

React.render(<Example />, document.getElementById("container"));

Pracovný príklad na jsfiddle: http://jsfiddle.net/vxub45kx/4/

Pozrite sa tu aj: https://facebook.github.io/react/docs/more-about-refs.html