以父组件调动子组件的方法巧妙入门ref

前端

2023-10-31 01:11:04

概述

在 React 中，我们经常遇到父组件需要与子组件通信的情景。这种通信可以是父组件向子组件传递数据，也可以是子组件向父组件反馈信息。要实现这种通信，我们需要使用ref。

ref的基本原理

ref是一个特殊的属性，可以将父组件中的元素引用赋给子组件。这样，父组件就可以通过这个引用来访问子组件的实例，从而实现通信。

使用ref的方法

1. 使用字符串ref

使用字符串ref，我们需要在父组件中定义一个变量来保存子组件的引用。然后，在子组件中使用ref属性将这个变量赋值给子组件的实例。

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  // ...

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

// 子组件
class ChildComponent extends React.Component {
  componentDidMount() {
    console.log(this.props.ref); // 输出: ParentComponent {childRef: ChildComponent}
  }

  // ...

  render() {
    return (
      <div>
        ...
      </div>
    );
  }
}

2. 使用函数ref

使用函数ref，我们需要在父组件中定义一个函数，然后将这个函数作为ref属性的值传递给子组件。当子组件挂载时，这个函数会被调用，并将子组件的实例作为参数传递给函数。

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  // ...

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

// 子组件
class ChildComponent extends React.Component {
  componentDidMount() {
    console.log(this.props.ref(this)); // 输出: ChildComponent {props: {…}, context: {…}, refs: {…}, …}
  }

  // ...

  render() {
    return (
      <div>
        ...
      </div>
    );
  }
}