“React Forwardref TypeScript” Kode Jawaban

react forwardref useimperativeHandle typeript

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);

/* 
and then use React utility ElementRef, TypeScript
can infer exact ref type of your component
*/
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} />
  );
};
florinrelea

React Forwardref TypeScript

type MyProps = {
  name: string;
}

const CustomInput = forwardRef<HTMLInputElement, MyProps>(props) => {
  // access your props and ref here
}
peachmangopie

Jawaban yang mirip dengan “React Forwardref TypeScript”

Pertanyaan yang mirip dengan “React Forwardref TypeScript”

Lebih banyak jawaban terkait untuk “React Forwardref TypeScript” di TypeScript

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya