Получите высоту компонента в реале

Question

У меня есть 4 столбца, ни одна из которых не установлена, и мне нужно найти высоту этих столбцов, чтобы можно было установить высоту самого большого столбца для остальных трех. Как я могу сделать это с помощью React и не использовать css minHeight?

Я новичок в реактиве и ближайший вопрос, который я нашел здесь, был ReactJS get rendered component height.

Также я нашел ссылку this, в которой говорится, что это можно сделать, получив DOMNode и используя Ref, но я не добился успеха.

Answer 1

Вы можете использовать обратный вызов ref и получить доступ к DOMNode внутри него.

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

Рабочий пример на jsfiddle: http://jsfiddle.net/vxub45kx/4/

Также смотрите здесь: https://facebook.github.io/react/docs/more-about-refs.html