Is het mogelijk in een functioneel component externe toegang tot de methoden van het component te bieden (handvatten naar buiten geven)?

In React functionele componenten kan externe toegang tot de methoden van de component worden geboden met behulp van forwardRef en useImperativeHandle.

Dit stelt je in staat om een referentie 'door te geven' en te bepalen welke methoden of eigenschappen van buitenaf toegankelijk zijn.

Voorbeeld:

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>Teller: {count}</div>;
});

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

Op deze manier kan externe code de methoden increment en reset van het component aanroepen.