Как вызвать метод компонента Child из Parent в React

Быстрый ответ

Для вызова метода компонента-потомка из компонента-родителя в React используется механизм refs. Создайте ссылку при помощи React.createRef(), присвойте её потомку и вызовите его метод через эту ссылку.

class Parent extends React.Component {
  childRef = React.createRef();

  callChildMethod = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <>
        <Child ref={this.childRef} />
        <button onClick={this.callChildMethod}>Вызвать метод потомка</button>
      </>
    );
  }
}

class Child extends React.Component {
  childMethod = () => {
    console.log("Метод потомка вызван!");
  };

  render() {
    return <div>Я компонент-потомок</div>;
  }
}

Если компонент-потомок является функциональным, используйте хуки forwardRef и useImperativeHandle:

const Child = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => console.log("Метод потомка вызван!")
  }));

  return <div>Я компонент-потомок</div>;
});

Использование refs и forwardRef

Refs позволяют получить доступ к функциональному компоненту-потомку из компонента-родителя. С помощью forwardRef возможно передать ссылку внутрь компонента-потомка. useImperativeHandle дает возможность определить методы, которые сможет вызвать компонент-родитель.

Расширение функциональности через коллбеки

Передача коллбеков в компоненты-потомки позволяет реагировать на различные действия и события. Особенно актуально это для реагирования на взаимодействие с пользователем и обеспечивания обработки стадий жизненного цикла.

Контроль над монтажом и демонтажом

Хук useEffect обеспечивает надежное взаимодействие компонентов на различных стадиях жизненного цикла, предотвращая утечки памяти и ошибки при обновлении состояния.

Визуализация

Представьте родителя и ребенка, где ребенок говорит о новом трюке, а родитель просит показать его:

👦: "Я научился новому трюку!"
👨: "Покажи мне его!"
// Ребенок выполняет трюк.

Переход по коду: функциональные компоненты

Функциональные компоненты не имеют экземпляров. С помощью forwardRef и useImperativeHandle обеспечивается взаимодействие между родительскими и дочерними компонентами.

Эффективная коммуникация: использование props

Передача данных через props между компонентами облегчает коммуникацию и поддерживает однонаправленный поток данных в React.

Ответственная обработка побочных эффектов: useEffect

Правильное использование хука useEffect позволяет управлять побочными эффектами с учетом массива зависимостей.

Исследование альтернатив: Context API & HOCs

Использование Context API и компонентов высокого порядка (HOCs) расширяет возможности контроля над данными и состоянием.

Дизайн и рефакторинг с учетом инкапсуляции данных

Пересмотрите прямое взаимодействие с refs. Каждый компонент должен быть самодостаточным, прямое использование refs должно быть ограничено и основательно продумано.

Полезные материалы

1. super – JavaScript | MDN — Как использовать super для вызова методов класса-родителя в ES6.
2. Lifting State Up – React — Стратегии обработки общего состояния в компонентах React.
3. Classes in JavaScript – Learn web development | MDN — Руководство по использованию классов и наследования в JavaScript.
4. Class inheritance — Работа с наследованием и переопределением методов в классах JavaScript.
5. javascript – How to extend a class without having to use super in ES6? – Stack Overflow — Обсуждение способов расширения класса без использования super в ES6.
6. Refs and the DOM – React — Доступ к методам дочерних компонентов в React с помощью refs.
7. Presentational and Container Components | by Dan Abramov | Medium — Идеи организации взаимодействия между компонентами в React.