父组件中调用子组件中的方法

长念阅读约 7 分钟3 年前发布2 年前编辑

文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式，并未涵盖 ref 的所有应用方式！

Class 组件

自定义事件

父组件
子组件

Parent.jsx
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  componentDidMount() {
    console.log(this.childRef);
  }
  handleChildEvent = (ref) => {
    // 将子组件的实例存到 this.childRef 中, 这样整个父组件就能拿到
    this.childRef = ref;
  };
  //按钮事件处理
  handleClick = () => {
    // 通过子组件的实例调用组组件中的方法
    this.childRef.sendMessage();
  };
  render() {
    return (
      <>
        <Child onChildEvent={this.handleChildEvent} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

export default Parent;

Child.jsx
import React, { Component } from 'react';

export default class Child extends Component {
  //子组件完成挂载时, 将子组件的方法 this 作为参数传到父组件的函数中
  componentDidMount() {
    // 在子组件中调用父组件的方法,并把当前的实例传进去
    this.props.onChildEvent(this);
  }
  // 子组件的方法, 在父组件中触发
  sendMessage = () => {
    console.log('sending message');
  };
  render() {
    return <span>Child</span>;
  }
}

使用 React.createRef()

父组件
子组件

Parent.jsx
import React, { Component } from 'react';
import Child from './Child';

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef(); // 创建Ref
  }
  // 直接通过 this.childRef.current 拿到子组件实例
  handleClick = () => {
    this.childRef.current.sendMessage();
  };
  render() {
    return (
      <>
        <ChildCmp ref={this.childRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

Child.jsx
import React, { Component } from 'react';

export default class Child extends Component {
  sendMessage = () => {
    console.log('sending message');
  };
  render() {
    return <span>Child</span>;
  }
}

回调 Refs

回调 Refs 是另一种设置 Ref 的方式，它能助你更精细地控制何时 refs 被设置和解除。

不同于传递 React.createRef() 创建的 ref 属性，需要传递一个函数。🍒 访问 Ref 的时候也不需要 current。

父组件
子组件

Parent.jsx
import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = null; // 创建 Ref，不通过 React.createRef()
  }
  // 设置 Ref
  setChildRef = (ref) => {
    this.childRef = ref;
  };

  // 直接通过 this.childRef 拿到子组件实例
  handleClick = () => {
    this.childRef.sendMessage(`Trigger Child Event from Parent`);
  };

  render() {
    return (
      <React.Fragment>
        <ChildCmp ref={this.setChildRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </React.Fragment>
    );
  }
}

Child.jsx
import React from 'react';

export default class Child extends React.Component {
  sendMessage = (message) => {
    console.log('sending message:', message);
  };
  render() {
    return <span>Child</span>;
  }
}

小结

对比自定义事件方式，回调 Refs 更像是精简的自定义事件方式：

自定义事件名称变成了 ref
子组件内不需要手动绑定

Function 组件

默认情况下，不能在函数组件上使用 ref 属性，因为它们没有实例。所以上面的两种方式是行不通的。解决办法就是使用 forwardRef 和 useImperativeHandle。

不过在函数的内部是可以使用 useRef 钩子来获取组件内的 DOM 元素。

forwardRef 和 useImperativeHandle

父组件
子组件

Parent.jsx
import React from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = React.useRef(null); // 通过 Hooks 创建 Ref
  const handleClick = () => {
    childRef.current.sendMessage();
  };
  return (
    <React.Fragment>
      <Child ref={childRef} />
      <button onClick={handleClick}>Trigger Child Event</button>
    </React.Fragment>
  );
};

export default Parent;

Child.jsx
import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  const sendMessage = () => {
    console.log('sending message');
  };
  //将子组件的方法 暴露给父组件
  useImperativeHandle(ref, () => ({
    sendMessage,
  }));
  return <span>Child</span>;
});

export default Child;

自定义 props 和 useImperativeHandle

只需将 ref 替换为 props。

父组件
子组件

Parent.jsx
import React from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = React.useRef(null); // 通过 Hooks 创建 Ref
  const handleClick = () => {
    childRef.current.sendMessage();
  };
  return (
    <React.Fragment>
      <Child onRef={childRef} />
      <button onClick={handleClick}>Trigger Child Event</button>
    </React.Fragment>
  );
};

export default Parent;

Child.jsx
import React, { useImperativeHandle } from 'react';

const Child = (props) => {
  const sendMessage = () => {
    console.log('sending message');
  };
  //将子组件的方法 暴露给父组件
  useImperativeHandle(props.onRef, () => ({
    sendMessage,
  }));
  return <span>Child</span>;
};

export default Child;

注意

以上例子中只是简单地演示了父子组件之间的方法调用，当然实际情况中子组件中可以也会有自己的 ref 指向自己内部的 DOM 元素，不过这些原理都是一样的。

Class 组件​

自定义事件​

使用 React.createRef()​

回调 Refs​

Function 组件​

forwardRef 和 useImperativeHandle​

自定义 props 和 useImperativeHandle​