react中ref的使用

react中ref的使用

拿一个简单的例子来说明会更清楚一些，现在我们有两个组件，当前的需求是我想在父组件里面拿到子组件里面本身这个实例，这个官方文档的推荐做法是使用回调函数。我们先使用官方文档上面回调函数的方式来实现。代码如下。

import React, { Component } from "react";
import MyComponent from "./MyComponent";
class Father extends Component {
  ref;
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    console.log(this.ref);
  }

  render() {
    return (
      <div>
        <MyComponent ref={(ref)=>{this.ref=ref;}} />
      </div>
    );
  }
}

export default Father;

从下图中可以看到,已经成功获取到我们子组件的实例了

image

但现在我们想在子组件里面使用表单，于是我们使用了ant-design的Form.create将我们的子组件包裹起来.

export default Form.create()(MyComponent);

然后我们想拿到我们的子组件本身，我们在通过同样的方式试试看，发生了什么。

image

唉？奇怪，为什么获取到的实例不对啊，仔细看看，可以看到，里面有很多 form 实例具有的的方法，说明我们拿到的是返回的高阶组件的实例。而不是我们组件的实例。

ref 是 无法获取到高阶组件包裹的低阶组件的

ref获取高阶组件包裹的低阶组件

父组件

class Father extends Component {
  ref;
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    console.log(this.ref);
  }

  onRef=(ref)=>{
      this.ref=ref;
  }

  render() {
    return (
      <div>
        <MyComponent onRef={this.onRef} />
      </div>
    );
  }
}

export default Father;

子组件

class MyComponent extends Component {
  constructor(props) {
    super(props);
    props.onRef(this);
    this.state={
    }
  }

  render() {
    return (
      <div>
        <Form>
          <Button>按钮</Button>
        </Form>
      </div>
    );
  }
}

export default Form.create()(MyComponent);

看一下打印结果，这样就成功拿到子组件这个实例了

image

这样你就能对子组件进行一系列操作了,比如改变子组件的状态, 假设子组件有个 visible 状态控制子组件内部某部分的显示与隐藏, 这样你就可以在父组件中通过

this.ref.setState({visible: false});

来控制该部分的变化了.

ref的强大还待研究, 后续有新的学习再更新相关的内容了.