如何获取元素的位置 React | Redux (.getBoundingClientRect() + .getWrappedInstance())

Question

我正在尝试查找使用 React 呈现的组件的位置。我正在使用 redux，所以我不得不将连接函数修改为：

export default connect(mapStateToProps, mapDispatchToProps,null,{ withRef: true })(MyComponent);

现在我在调用时得到了一个组件：

class OneColumn extends Component { 
    componentDidMount(){

        var input = this.refs.myComponentsRef.getWrappedInstance();

        console.log(input); // Outputs > TheComponentIWant {props: Object, context: Object, refs: Object, updater: Object, _reactInternalInstance: ReactCompositeComponentWrapper…}

        var inputRect = input.getBoundingClientRect(); 
        console.log(inputRect); // Outputs error: Uncaught TypeError: input.getBoundingClientRect is not a function
    }
//...
}

所以我可以获得组件，但是我无法获得 boundingClientRect。

有什么我忽略的吗？

请帮忙:)

Answer 1

我找到了绕过这个问题的替代解决方案：This post describes and refers to another post

基本上，当组件开始渲染时，组件会提供一个回调函数，您可以在其中存储这些组件的位置。

如何获取元素的位置 React | Redux (.getBoundingClientRect() + .getWrappedInstance())

How to get position of element React | Redux (.getBoundingClientRect() + .getWrappedInstance())

reactjs

getboundingclientrect

redux