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

要获取React | Redux元素的位置，可以使用.getBoundingClientRect()方法和.getWrappedInstance()方法。

.getBoundingClientRect()方法返回一个DOMRect对象，包含了元素的位置、大小等信息。可以通过调用该方法来获取元素的位置。

.getWrappedInstance()方法是Redux中的一个方法，用于获取被包装的组件实例。通过调用该方法，可以获取到被包装组件的实例，然后再使用.getBoundingClientRect()方法来获取该组件元素的位置。

以下是一个示例代码，演示如何获取React | Redux元素的位置：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyComponent extends Component {
  componentDidMount() {
    const element = this.getWrappedInstance().getElement();
    const rect = element.getBoundingClientRect();
    console.log('元素位置：', rect);
  }

  getWrappedInstance() {
    // 使用Redux的connect方法包装组件后，可以通过this.wrappedInstance获取被包装组件的实例
    return this.wrappedInstance;
  }

  render() {
    return <div ref={ref => this.wrappedInstance = ref}>React | Redux元素</div>;
  }
}

export default connect()(MyComponent);

在上述示例中，通过ref属性将被包装组件的实例赋值给this.wrappedInstance，然后在componentDidMount()生命周期方法中，通过this.getWrappedInstance().getElement()获取到被包装组件的DOM元素，再使用.getBoundingClientRect()方法获取元素的位置。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。同时，腾讯云提供了一系列与React | Redux相关的产品和服务，你可以参考腾讯云官方文档来了解更多详情和推荐的产品。

参考链接：