Как разместить компонент React относительно его родителя?

Question

У меня есть родительская компонента React, которая содержит дочерний компонент React.

<div> 
    <div>Child</div> 
</div> 

мне нужно применить стили к компоненту ребенка, чтобы поместить его в своем родителе, но его положение зависит от размера родителя.

render() { 
    const styles = { 
    position: 'absolute', 
    top: top(), // computed based on child and parent's height 
    left: left() // computed based on child and parent's width 
    }; 
    return <div style={styles}>Child</div>; 
} 

Я не могу использовать процентные значения здесь, так как верхние и левые позиции функции ребенка и ширины и высоты родителя.

Что такое способ реагирования для этого?

Answer 1

Ответ на этот вопрос заключается в использовании ссылки, как описано на странице Refs to Components.

Основная проблема заключается в том, что узел DOM (и его родительский узел DOM) необходим для правильной установки элемента, но он недоступен до первого рендеринга. Из статьи, приведенной выше:

Выполнение измерений DOM почти всегда требует обращения к «родному» компоненту и доступа к его базовому узлу DOM с использованием ссылки ref. Refs - один из единственных практических способов сделать это надежно.

Вот решение:

getInitialState() { 
    return { 
    styles: { 
     top: 0, 
     left: 0 
    } 
    }; 
}, 

componentDidMount() { 
    this.setState({ 
    styles: { 
     top: computeTopWith(this.refs.child), 
     left: computeLeftWith(this.refs.child) 
    } 
    }) 
}, 

render() { 
    return <div ref="child" style={this.state.styles}>Child</div>; 
} 

Это будет правильно расположить элемент сразу после первой визуализации. Если вам также необходимо изменить положение элемента после изменения на реквизиты, сделайте изменение состояния в componentWillReceiveProps(nextProps).

Answer 2

Правильный способ сделать это - использовать CSS. Если вы примените position:relative к родительскому элементу, то дочерний элемент может быть перемещен с использованием top и left в отношении этого родителя. Вы можете даже использовать проценты, например top:50%, который использует высоту родительского элемента.