reactjs功能在组件之间调用的问题

Question

问题：- 我在“App.js”中编写了一个名为“getData()”的函数，并且可以在“User.js”中调用它。代码写在下面。

但是，如果我在“User.js”中编写了“getdata()”函数，并且必须在“App.js”中调用它，该怎么办？我怎样才能做到这一点？我不能这样做.. 请指导我。

App.js

import User from './User'
function App() {
  function getData() {
    alert("Hello from app component")
  }
  return (
    <div className="App">
     <User data={getData}/>
    </div>
  );
}
export default App: 

User.js

function User(props) {
        return(
            <div>
                <h1>User Component</h1>
                <button onClick={props.data}> Call Function</button>
            </div>
    export default User;

Answer 1

App.js

import React, { useRef } from 'react';
import User from './User';

function App() {
  const childRef = useRef();

  return (
    <div className="App">
      <User ref={childRef} />
      <button onClick={() => childRef.current.getData()}>Call Function</button>
    </div>
  );
}
export default App;

User.js

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

const User = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getData() {
      alert('Hello from user component');
    },
  }));

  return (
    <div>
      <h1>User Component</h1>
    </div>
  );
});
export default User;