Функционалдык компонентте компоненттин ыкмамдарына сырттан жеткиликтүүлүк берүү мүмкүнбү (сыртка «тутуктар» берүү)?

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 методдорун чакыра алат.