Kas on võimalik funktsionaalses komponendis pakkuda välise juurdepääsu komponendi meetoditele (anda 'käepidemed' välja)?

Funktsionaalsetes Reacti komponentides saab väliselt ligi pääseda komponendi meetoditele, kasutades forwardRef ja useImperativeHandle.

See võimaldab 'üle anda' viite ja määrata, millised meetodid või omadused on väljast kättesaadavad.

Näide:

import React, { useImperativeHandle, forwardRef, useState } from 'react';

const MyComponent = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    increment() {
      setCount(c => c + 1);
    },
    reset() {
      setCount(0);
    }
  }));

  return <div>Loendur: {count}</div>;
});

// Kasutamine
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();

Sellisel viisil saab väline kood kutsuda komponendi increment ja reset meetodeid.