Lehetséges-e egy funkcionális komponensben külső hozzáférést biztosítani a komponens módszereihez (kivenni 'fogantyúkat')?

A React funkcionális komponenseiben külső hozzáférést lehet biztosítani a komponens metódusaihoz a forwardRef és a useImperativeHandle segítségével.

Ez lehetővé teszi, hogy 'átadjon' egy referenciát, és meghatározza, mely metódusok vagy tulajdonságok lesznek elérhetők kívülről.

Példa:

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>Számláló: {count}</div>;
});

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

Így a külső kód hívhatja a increment és reset metódusokat a komponensben.