Sobes.tech
Back to questions
Middle
4

Есть ли возможность в функциональном компоненте предоставить внешний доступ к методам компонента (дать «ручки» наружу)?

Companies where asked
Тензор

Answer from AI

sobes.tech AI

В функциональных компонентах 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: {count}</div>;
});

// Использование
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();

Таким образом, внешний код может вызывать методы increment и reset компонента.