Estoy tratando de llamar al método de componente secundario, probé varias soluciones de Internet pero nada funcionó. Aquí está el enlace de stackblitz

Aquí está el fragmento de código

Componente principal

 import React, { Component } from 'react'; import Child from './child'; const Form = (props) => { return ( <div> <Child ref={(instance) => { this.child = instance; }} /> <button onClick={() => { props.callparent(this.child); }} > Click </button> </div> ); }; class Parent extends Component { parentfunc = (childref) => { //invoking child method childref.getAlert(); }; render() { return ( <div> <Form callparent={() => { this.parentfunc(); }} /> </div> ); } } export default Parent;

niño.js

 import React, { Component } from 'react'; class Child extends Component { getAlert() { alert('clicked'); } render() { return <h1>Hello</h1>; } } export default Child;

Cuando intento invocar el método hijo childref.getAlert(); Veo TypeError no detectado: no se pueden establecer propiedades de indefinido (estableciendo 'hijo').

Estoy seguro de que no estoy creando la referencia secundaria correctamente y pasándola a la función para invocar el método secundario. ¿Alguien puede ayudarme aquí?