我有一个父反应组件包含一个子反应组件.
<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方式？
解决方法
这个问题的答案是使用
Refs to Components所述的参考.
基本的问题是需要DOM节点(及其父DOM节点)才能正确定位元素,但直到第一次渲染才能使用.从上面链接的文章：
Performing DOM measurements almost always requires reaching out to a “native” component and accessing its underlying DOM node using a ref. Refs are one of the only practical ways of doing this reliably.
这是解决方案：
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)中进行状态更改.
