Taro 小程序父组件基于Class如何拿到子组件基于Hooks的实例对象

如果父组件不是基于 Hooks 写法（类组件），而子组件是基于 Hooks 写法（函数组件），你依然可以通过 ref 访问子组件中的方法或状态。为此，你需要使用 forwardRef 和 useImperativeHandle 在子组件中自定义要暴露的内容。

具体步骤

1. 在子组件中使用 forwardRef 将 ref 传递给它。
2. 在子组件中使用 useImperativeHandle 来暴露需要的函数或状态。
3. 在父组件中使用 React.createRef() 来获取子组件的 ref。

子组件：（基于 Hooks）

import React, { useImperativeHandle, forwardRef, useState } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  // 暴露子组件内部的方法给父组件
  useImperativeHandle(ref, () => ({
    increment: () => setCount(count + 1),
    reset: () => setCount(0),
    getCount: () => count,  // 暴露当前 count 值给父组件
  }));

  return (
    <view>
      <text>Count: {count}</text>
    </view>
  );
});

export default ChildComponent;

父组件：（基于类组件）

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // 创建 ref 用于获取子组件的方法
    this.childRef = React.createRef();
  }

  handleIncrement = () => {
    if (this.childRef.current) {
      this.childRef.current.increment();
    }
  };

  handleReset = () => {
    if (this.childRef.current) {
      this.childRef.current.reset();
    }
  };

  handleGetCount = () => {
    if (this.childRef.current) {
      alert(`Current count: ${this.childRef.current.getCount()}`);
    }
  };

  render() {
    return (
      <view>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleIncrement}>Increment</button>
        <button onClick={this.handleReset}>Reset</button>
        <button onClick={this.handleGetCount}>Get Count</button>
      </view>
    );
  }
}

export default ParentComponent;

关键点：

1. 子组件（函数组件）使用 forwardRef 和 useImperativeHandle：

• forwardRef 使得父组件能够通过 ref 访问子组件。
• useImperativeHandle 用来暴露子组件内部的某些方法或状态。

2. 父组件（类组件）使用 React.createRef()：

• 父组件通过 this.childRef 来获取子组件暴露出来的方法。

总结：
即使父组件是基于类组件的，你仍然可以通过 ref 访问函数式子组件的内部方法或状态。这种模式非常适合处理父类组件与基于 Hooks 写法的子组件的通信需求。