父组件如何通过React Hooks(useImperativeHandle)来获取子组件状态和方法？

类组件中获取子组件状态和方法的传统方式

在类组件中，我们可以使用ref属性来获取子组件的实例。然后，我们可以使用this.refs.子组件名称来访问子组件的状态和方法。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.childRef = React.createRef();
  }

  componentDidMount() {
    const child = this.childRef.current;
    console.log(child.state.count); // 输出: 0
    child.incrementCount(); // 调用子组件的方法
  }

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

class ChildComponent extends React.Component {
  state = {
    count: 0,
  };

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
      </div>
    );
  }
}

函数组件中获取子组件状态和方法的新方式

在函数组件中，我们不能使用ref属性来获取子组件的实例。因此，我们需要使用React Hooks来实现同样的功能。

import { useRef, useImperativeHandle } from 'react';

const ChildComponent = React.forwardRef((props, ref) => {
  const state = useRef({ count: 0 });

  const incrementCount = () => {
    state.current.count++;
  };

  useImperativeHandle(ref, () => ({
    incrementCount,
  }));

  return (
    <div>
      <h1>{state.current.count}</h1>
    </div>
  );
});

const ParentComponent = () => {
  const childRef = useRef();

  const handleClick = () => {
    childRef.current.incrementCount();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
};

在上面的示例中，我们使用useRef钩子来创建了一个引用，指向子组件的状态。然后，我们使用useImperativeHandle钩子来将该引用暴露给父组件。

const state = useRef({ count: 0 });

这个state引用是一个对象，其中包含子组件的状态。

const incrementCount = () => {
  state.current.count++;
};

这个incrementCount函数是子组件的方法。它可以被父组件调用来增加子组件的状态。

useImperativeHandle(ref, () => ({
  incrementCount,
}));

这个useImperativeHandle钩子将ref引用暴露给父组件。父组件可以使用这个引用来访问子组件的状态和方法。

const childRef = useRef();

这个childRef引用指向子组件。

const handleClick = () => {
  childRef.current.incrementCount();
};

这个handleClick函数被父组件用来调用子组件的方法。当父组件调用这个函数时，它会增加子组件的状态。