React で親コンポーネントから子関数を呼び出す

this.newRef = React.createRef();

<Child ref={this.newRef} />

this.childRef.current.childMethod();

//  import required libraries
import React from "react";
import Child from "./Child";

export default class APP extends React.Component {
  constructor(props) {
    super(props);
    // Initializing the Refs
    this.childRef = React.createRef();
  }
  //  call the child method
  callChild = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <div>
        {/* Passing Ref to CHild component */}
        <Child ref={this.childRef} />
        <button onClick={this.callChild}>Click</button>
      </div>
    );
  }
}

import React from "react";
export default class Child extends React.Component {
    childMethod() {
        alert('Called the Method of Child.');
    }
    render() {
        return <h1>This is From Child Component.</h1>;
    }
}

//  import required libraries
import React, { useRef } from "react";
import Child from "./Child";

export default function APP() {
  // use hooks to create `ref`
  const childRef = useRef();
  // call child method
  const onClick = () => {
    childRef.current.childMethod();
  };
  return (
    <div>
      {/* Passing Ref to CHild component */}
      {/* use `refs` */}
      <Child ref={childRef} />
      <button onClick={onClick}>Click</button>
    </div>
  );
}

import React, { forwardRef, useImperativeHandle } from "react";
// While using the hooks, it is required to wrap the component inside the forwardRef to gain access to the ref object,
//, which we create using the `useref` hooks inside the parent component.
const Child = forwardRef((props, ref) => {
  // Extending the child component with the return value of the callback function passed as a second parameter of the useImperatuveHandle.
  useImperativeHandle(ref, () => ({
    childMethod() {
      alert("Called the Method of Child.");
    },
  }));

  return <h1>Use Refs in functional component.</h1>;
});
export default Child;