如何定位一个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>;
}

我不能在这里使用百分比值，因为顶部和左侧的位置是子组件和父组件的宽度和高度的函数。

有什么React的方法可以实现这个功能？

Answer 1

这个问题的答案是使用一个ref，如在 参考元件.

根本的问题是，需要DOM节点（以及它的父DOM节点）来正确定位元素，但它要在第一次渲染后才能使用。来自上面链接的文章。

执行DOM测量几乎总是需要接触到一个 "原生 "组件，并使用ref访问其底层DOM节点。Refs是唯一可靠地完成这一任务的实用方法之一。

这就是解决方案。

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

componentDidMount() {
  this.setState({
    styles: {
      // Note: computeTopWith and computeLeftWith are placeholders. You
      // need to provide their implementation.
      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%，它利用了父元素的高度。