Javascript 如何相对于其父级定位 React 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34660385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a React component relative to its parent?
提问by Seth
I have a parent React component that contains a child React component.
我有一个包含子 React 组件的父 React 组件。
<div>
<div>Child</div>
</div>
I need to apply styles to the child component to position it within its parent, but its position depends on the size of the parent.
我需要将样式应用于子组件以将其定位在其父组件中，但其位置取决于父组件的大小。
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>;
}
I can't use percentage values here, because the top and left positions are functions of the child and parent's widths and heights.
我不能在这里使用百分比值，因为顶部和左侧的位置是孩子和父母的宽度和高度的函数。
What is the React way to accomplish this?
实现此目的的 React 方法是什么？
采纳答案by Seth
The answer to this question is to use a ref as described on Refs to Components.
这个问题的答案是使用Refs to Components 中描述的 ref 。
The underlying problem is that the DOM node (and its parent DOM node) is needed to properly position the element, but it's not available until after the first render. From the article linked above:
潜在的问题是需要 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.
执行 DOM 测量几乎总是需要接触“本地”组件并使用 ref 访问其底层 DOM 节点。参考是可靠地做到这一点的唯一实用方法之一。
Here is the solution:
这是解决方案：
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>;
}
This will properly position the element immediately after the first render. If you also need to reposition the element after a change to props, then make the state change in componentWillReceiveProps(nextProps).
这将在第一次渲染后立即正确定位元素。如果您还需要在更改为 props 后重新定位元素，则在componentWillReceiveProps(nextProps).
回答by Sean C
The right way to do this is to use CSS. If you apply position:relativeto the parent element then the child element can be moved using topand leftin relation to that parent. You can even use percentages, like top:50%, which utilizes the height of the parent element.
正确的方法是使用 CSS。如果应用position:relative到父元素，则子元素可以使用移动top，并left就该父。您甚至可以使用百分比，例如top:50%，它利用父元素的高度。
