Είναι δυνατό σε ένα λειτουργικό συστατικό να παρέχετε εξωτερική πρόσβαση στις μεθόδους του συστατικού (να δώσετε 'χειριστήρια' έξω);

Στα λειτουργικά συστατικά του React, μπορείτε να παρέχετε εξωτερική πρόσβαση στις μεθόδους του συστατικού χρησιμοποιώντας forwardRef και useImperativeHandle.

Αυτό επιτρέπει να 'περάσετε' μια αναφορά και να ορίσετε ποιες μέθοδοι ή ιδιότητες θα είναι διαθέσιμες από έξω.

Παράδειγμα:

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>Μετρητής: {count}</div>;
});

// Χρήση
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();

Έτσι, ο εξωτερικός κώδικας μπορεί να καλέσει τις μεθόδους increment και reset του συστατικού.