Прикрепление методов к компоненту функции в React


1. Создайте ссылку с помощью React.createRef.

const ref = React.createRef();
Вход в полноэкранный режим Выйти из полноэкранного режима

2. Передайте ссылку компоненту.

Вы можете передать ссылку компоненту в функции рендеринга.

import App from './App'

export default function AppContainer() {
const ref = React.useRef(null);

  return ( 
    <App ref={ref} />
  )
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Либо создать и отрендерить компонент через API react и передать ссылку в качестве параметра в функцию React.createElement.

import App from './App'

const container = document.createElement("div");
const props = {};
const element = React.createElement(App, { props, ref });
ReactDOM.render(element, container);
Вход в полноэкранный режим Выход из полноэкранного режима

3. Прикрепите методы к ссылке.

function App(props, ref) {
  ref.current = {
    action: () => {
      // do something
    }
  };

  return (
    <>
      {/* Here render your components */}
    </>
  );
}
export default React.forwardRef(App);
Войти в полноэкранный режим Выйти из полноэкранного режима

4. Вызов методов извне компонента.

ref.action()
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий