Как определить и использовать высоту определенных компонентов?

Question

[mishapsv]

Есть несколько компонентов, помещенных в родительский.
Нужно в зависимости от того присутствуют они или нет, и от того, какая их высота, задавать верхний паддинг родительского элемента.
Примерную схему сделал здесь.
Только heightHeader и heightAlert должны быть равны высоте соответствующих компонентов.
Подскажите, что использовать или где почитать, что-то ничего не могу найти.
(пробовал var heightHeader = React.findDOMNode(this.refs.header), но видимо не так использую, т.к. выдает null).

Answer 1

[max107]

Чтобы получить DOM элемент в React <= 0.13 нужно var el = React.findDOMNode(this.refs.my_name_node); $(el)... в React >= 0.14 $(this.refs.my_name_node)...

Ссылка к сожалению не открывается, отдает 504

Comments

[mishapsv]

max107 jsbin не работал. Посмотрите, пожалуйста, сейчас, должно открываться.
Дело в том, что я пробовал прописывать ref="header" в компоненте и затем писать var heightHeader = React.findDOMNode(this.refs.header) (версия 13, да), но безуспешно.

[max107]

var heightHeader = React.findDOMNode(this.refs.header) Возвращает DOM ноду, у нее далее выполни .innerHeight

[mishapsv]

max107 Извиняюсь, но не получается.
Просто переменной нельзя задавать, пишет, что нужно в компонентДидМаунт или ..ДидАпдейт.
Сделал так, но видимо что-то упускаю.
jsbin.com/qoreratuxo/edit?html,css,js,console,output

[max107]

В вашем примере указан ref внутри компонента Header, хотя должен быть указан внутри App, чтобы из App был по ref доступен компонент Header: https://gist.github.com/max107/3c844561932f5f95c104