react中父组件拿到子组件的回调

在React中，父组件可以通过不同的方式获取子组件的回调函数。

方法一：通过props传递回调函数
在父组件中定义一个函数，并将该函数作为props传递给子组件。子组件在适当的时机调用该函数，从而实现父组件获取子组件的回调。

// 父组件
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  handleChildEvent = (childInstance) => {
    // 在父组件中获取子组件的实例
    console.log(childInstance);
    // 调用子组件的方法
    childInstance.sendMessage();
  }

  render() {
    return (
      <div>
        <Child onChildEvent={this.handleChildEvent} />
      </div>
    );
  }
}

export default Parent;

// 子组件
import React, { Component } from 'react';

class Child extends Component {
  componentDidMount() {
    // 在子组件完成挂载时，将子组件的实例作为参数传递给父组件的函数
    this.props.onChildEvent(this);
  }

  sendMessage = () => {
    console.log('sending message');
  }

  render() {
    return (
      <span>Child</span>
    );
  }
}

export default Child;

方法二：使用React.createRef()
在父组件中使用React.createRef()创建一个ref对象，并将该ref对象传递给子组件。子组件通过useImperativeHandle将自己的方法暴露给父组件。

// 父组件
import React, { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = useRef(null);

  const handleChildEvent = () => {
    // 在父组件中调用子组件的方法
    childRef.current.sendMessage();
  }

  return (
    <div>
      <Child onRef={childRef} />
      <button onClick={handleChildEvent}>Call Child Method</button>
    </div>
  );
}

export default Parent;

// 子组件
import React, { useImperativeHandle, forwardRef } from 'react';

const Child = forwardRef((props, ref) => {
  const sendMessage = () => {
    console.log('sending message');
  }

  // 将子组件的方法暴露给父组件
  useImperativeHandle(ref, () => ({
    sendMessage
  }));

  return (
    <span>Child</span>
  );
});

export default Child;