我有一个包含子 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 方法是什么？
这个问题的答案是使用Refs to Components 中描述的 ref 。
潜在的问题是需要 DOM 节点（及其父 DOM 节点）来正确定位元素，但直到第一次渲染之后才可用。从上面链接的文章：
执行 DOM 测量几乎总是需要接触“本地”组件并使用 ref 访问其底层 DOM 节点。参考是可靠地做到这一点的唯一实用方法之一。
这是解决方案：
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).
这就是我做到的
const parentRef = useRef(null)
const handleMouseOver = e => {
const parent = parentRef.current.getBoundingClientRect()
const rect = e.target.getBoundingClientRect()
const width = rect.width
const position = rect.left - parent.left
console.log(`width: ${width}, position: ${position}`)
}
<div ref={parentRef}>
{[...Array(4)].map((_, i) => <a key={i} onMouseOver={handleMouseOver}>{`Item #${i + 1}`}</a>)}
</div>
正确的方法是使用 CSS。如果应用position:relative到父元素，则子元素可以使用移动top，并left就该父。您甚至可以使用百分比，例如top:50%，它利用父元素的高度。