Problema: He escrito una función llamada " getData() " en "App.js" y puedo llamarla en "User.js". El código está escrito a continuación.
Pero, ¿qué pasa si he escrito esa función "getdata()" en "User.js" y tengo que llamarla en "App.js". ¿Cómo puedo hacer eso? no soy capaz de hacerlo .. por favor guíame.
Aplicación.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:Usuario.js
function User(props) { return( <div> <h1>User Component</h1> <button onClick={props.data}> Call Function</button> </div> export default User;Aplicación.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;Usuario.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;