App.tsx

import React, { useRef } from "react";
import ChildComponent, { ChildComponentRef } from "./ChildComponent";

const App: React.FC = () => {
  // Create a reference to the child component
  const childComponentRef = useRef<ChildComponentRef>(null);

  // Function to trigger the child component's function
  const triggerChildFunction = () => {
    // Check if the child component reference is valid
    if (childComponentRef.current) {
      // Call the child component's function
      childComponentRef.current.childFunction();
    }
  };

  return (
    <div>
      {/* Button to trigger the child component's function */}
      <button onClick={triggerChildFunction}>Trigger Child Function</button>

      {/* Render the child component and pass the ref */}
      <ChildComponent ref={childComponentRef} />
    </div>
  );
};

export default App;

ChildComponent.tsx

import React, { forwardRef, useImperativeHandle } from "react";

interface ChildComponentProps {
  // Define any props needed by the child component
}

export interface ChildComponentRef {
  childFunction: () => void;
}

const ChildComponent: React.ForwardRefRenderFunction<
  ChildComponentRef,
  ChildComponentProps
> = (_, ref) => {
  // Function to be triggered from the parent component
  const childFunction = () => {
    // Do something in the child component
    console.log("Child function is triggered.");
  };

  // Expose the childFunction via ref to the parent component
  useImperativeHandle(ref, () => ({
    childFunction
  }));

  return (
    // JSX for the child component
    <div>{/* Child component content */}</div>
  );
};

export default forwardRef(ChildComponent);

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);