ReactJs函数在组件之间调用时出现问题

Question

问题：-我写了一个名为">getData(("；在"；js"我可以称之为"；用户.js"；。代码写在下面。

但是，如果我写了"getdata((">函数在"；用户.js"；我不得不称之为"；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;