react中ref的理解与简单运用

1、ref概念

在React中，ref是一种用于获取对特定元素或组件实例的引用的方式。 它通常用于访问特定元素，如输入框或自定义组件的实例，或者访问组件上的方法以调用该方法与组件进行交互。

一般情况下，ref通过调用React.createRef()创建，然后将其分配给渲染的元素或组件的ref属性。

需要注意的是，ref只能用于Class组件和部分原生组件，如<input>和<div>等。无状态函数组件不能使用ref。另外，ref在函数式组件中可以使用React.forwardRef来实现。

2、 通过点击按钮实现antd的Modal模态框位置跟随按钮位置进行变化

通过获取到的绑定元素的位置信息，来设置模板框的位置

import React, { Component } from 'react';
import { Modal, Button } from 'antd';

export default class Cp extends Component {
  constructor(props) {
    super(props);
    this.uploadListContainerRef = React.createRef(); // 创建ref
    this.state = {
      modalInfo: {},
      visible: false
    }
  }

  showVisible= ()=>{
    const { current: uploadListContainer } = this.uploadListContainerRef;
    // 获取当前绑定元素的位置信息
    console.log(uploadListContainer.getBoundingClientRect(), '获取当前绑定元素的位置信息')
    this.setState({
      visible: true,
      modalInfo: uploadListContainer.getBoundingClientRect() || {}
    })
  }

  cancelVisible = ()=>{
    this.setState({
      visible: false,
      modalInfo: {}
    })
  }

  render() {
    const {modalInfo, visible} = this.state
    return (
      <div>
        <div ref={this.uploadListContainerRef} id='uploadListContainer' className='upload-list-container'>
          <Button onClick={this.showVisible}>点击唤起弹窗</Button>
        </div>
        <Modal title={'我的弹窗'} mask={false} visible={visible} footer={null} width={800} 
          style={{marginTop: modalInfo.y, marginLeft: modalInfo.x}} onCancel={this.cancelVisible}>  
          我的弹窗
        </Modal>
      </div>
    );
  }
}

 3、ref的优缺点