“reagieren Sie vorwärts” Code-Antworten

reagieren Sie Vorwärtsnutzungsnutzungs -TypeScript

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

reagieren Sie vorwärts

type MyProps = {
  name: string;
}

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

Ähnliche Antworten wie “reagieren Sie vorwärts”

Fragen ähnlich wie “reagieren Sie vorwärts”

Weitere verwandte Antworten zu “reagieren Sie vorwärts” auf TypeScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen