taro小程序父子组件之间调用方法

终身学习：不断提升自我我们生活在一个快速变化的时代，要想不断成长、进步，就必须保持终身学习的态度。无论是专业知识、技能还是生活常识，我们都要及时更新、充实。这样，我们才能跟上社会的步伐，不断提升自我价值。让我们一起践行终身学习，追求卓越。

父组件调用子组件方法

• 子组件

import { forwardRef, useImperativeHandle } from "react";

const TestC = forwardRef(({ }, ref) => {
  useImperativeHandle(ref, () => ({
    onChildFn: (data) => {
      console.log('onChildFn', data);
    },
  }));
  return (
    <>
      11
    </>
  )
})

export default TestC

• 父组件

import { useRef } from "react";
import TestC from "./testC";

const Page = () => {
  const testRef = useRef<any>();
  return (
    <>
      <button onClick={() => {
        testRef.current.onChildFn('我被父组件调用了');
      }}>点击</button>
      <TestC ref={testRef} />
    </>
  )
}

export default Page

子件调用父组件方法

• 子组件

interface TestCProps {
  onChange: () => void;
}

const TestC: React.FC<TestCProps> = (props) => {
  const { onChange } = props;

  return (
    <>
      <button onClick={() => {
        onChange && onChange();
      }}>点击</button>
    </>
  )
}

export default TestC

• 父组件

import TestC from "./testC";

const Page = () => {

  const onChange = () => {
    console.log("我被子组件调用了")
  }

  return (
    <>

      <TestC onChange={() => onChange()} />
    </>
  )
}

export default Page