我有一个包含子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>;
}
我不能在这里使用百分比值，因为顶部和左侧位置是子对象和父对象宽度和高度的函数.
实现这一点的方法是什么？
这个问题的答案是使用参考号，如Refs to Components所述.
根本的问题是需要DOM node (及其父DOM node )来正确定位元素，但它在第一次渲染之后才可用.从上面链接的文章中:
执行DOM测量几乎总是需要接触一个"本机"组件，并使用ref访问其底层DOM node .ref是唯一可靠地实现这一点的实用方法之一.
以下是解决方案:
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>;
}
这将在第一次渲染后立即正确定位元素.如果更改props 后还需要重新定位元素，请在componentWillReceiveProps(nextProps)中更改状态.