Ist es in einer funktionalen Komponente möglich, externen Zugriff auf die Methoden der Komponente zu gewähren (Griffe nach außen geben)?

In funktionalen React-Komponenten kann externer Zugriff auf die Methoden der Komponente mit forwardRef und useImperativeHandle bereitgestellt werden.

Dies ermöglicht es, eine Referenz zu 'übergeben' und festzulegen, welche Methoden oder Eigenschaften von außen zugänglich sind.

Beispiel:

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

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

Auf diese Weise kann externer Code die Methoden increment und reset des Komponenten aufrufen.