Vai funkcionālajā komponentā ir iespējams nodrošināt ārēju piekļuvi komponenta metodēm (nodot 'rokturus' ārpusē)?

React funkcionālajās komponentēs var nodrošināt ārēju piekļuvi komponenta metodēm, izmantojot forwardRef un useImperativeHandle.

Tas ļauj 'nodot' atsauci un noteikt, kuras metodes vai īpašības būs pieejamas no ārpuses.

Piemērs:

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>Skaitītājs: {count}</div>;
});

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

Šādi ārējais kods var izsaukt increment un reset metodes komponentā.