function App(){ const cntEl:any = React.useRef(null); // I don't know what type should be here. React.useEffect(()=>{ if(cntEl.current){ cuntEl.current.start() } }, []); return <Countdown ref={cntEl} /> } const Countdown = React.forwardRef((props,ref) => { React.useImperativeHandle(ref, ()=>({ start() { alert('Start'); } }); return <div>Countdown</div> }); Intento usar un método secundario en un componente principal usando ref y React.useImperativeHandle() .
Funciona bien.
pero no estoy satisfecho debido a const cntEl:any .
Creo que hay muchas maneras de evitar el uso de any tipo que no conozco.
Solo necesito un tipo que pueda ser reemplazado por any tipo.
editado
Puedo ver (property) React.MutableRefObject<null>.current: null cuando paso el cursor por cntEl.current
No es necesario escribir cntEl como any . Además, puede usar Countdown como parámetro genérico de tipo para useRef
const cntEl = React.useRef<Countdown>(null);Te recomiendo que uses definiciones de tipos más explícitamente
Por ejemplo, con React DT, puede definir el componente exótico ref con ForwardRefRenderFunction en lugar de FC .
type CountdownProps = {} type CountdownHandle = { start: () => void, } const Countdown: React.ForwardRefRenderFunction<CountdownHandle, CountdownProps> = ( props, forwardedRef, ) => { React.useImperativeHandle(forwardedRef, ()=>({ start() { alert('Start'); } }); return <div>Countdown</div>; } export default React.forwardRef(Countdown); y luego use la utilidad React ElementRef , TypeScript puede inferir el tipo de referencia exacto de su componente
const App: React.FC = () => { // this will be inferred as `CountdownHandle` type CountdownHandle = React.ElementRef<typeof Countdown>; const ref = React.useRef<CountdownHandle>(null); // assign null makes it compatible with elements. return ( <Countdown ref={ref} /> ); };La respuesta aceptada es demasiado complicada, solo necesita declarar un tipo CountdownHandle .
Para mí será así:
// Countdown.tsx export type CountdownHandle = { start: () => void; }; type Props = {}; const Countdown = React.forwardRef<CountdownHandle, Props>((props, ref) => { React.useImperativeHandle(ref, () => ({ // start() has type inferrence here start() { alert('Start'); }, })); return <div>Countdown</div>; }); // The component uses the Countdown component import Countdown, { CountdownHandle } from "./Countdown.tsx"; function App() { const countdownEl = React.useRef<CountdownHandle>(null); React.useEffect(() => { if (countdownEl.current) { // start() has type inferrence here as well countdownEl.current.start(); } }, []); return <Countdown ref={countdownEl} />; }