В React передача данных и событий между родительскими и дочерними компонентами является общим требованием. Хотя передача данных от родительского компонента к дочернему с помощью реквизитов является простой задачей, обратный процесс передачи данных и событий из дочернего компонента в родительский может быть немного более сложным. В этой статье мы рассмотрим семь различных методов с примерами кода для достижения этой функциональности.

Метод 1: функции обратного вызова
Один из способов передать данные из дочернего компонента его родительскому — использовать функции обратного вызова. Родительский компонент передает дочернему компоненту функцию обратного вызова в качестве реквизита, которую дочерний компонент может вызвать для отправки данных или запуска события. Вот пример:

// ParentComponent.jsx
import React from "react";
const ParentComponent = () => {
  const handleDataSubmission = (data) => {
    // Handle the submitted data
    console.log(data);
  };
  return <ChildComponent onSubmit={handleDataSubmission} />;
};
// ChildComponent.jsx
import React from "react";
const ChildComponent = ({ onSubmit }) => {
  const handleSubmit = () => {
    const data = "Example data";
    onSubmit(data);
  };
  return <button onClick={handleSubmit}>Submit Data</button>;
};

Метод 2: Контекстный API
Контекстный API позволяет обмениваться данными между компонентами без их явной передачи через реквизиты. Создав контекст в родительском компоненте, вы можете предоставить значение, к которому смогут получить доступ дочерние компоненты. Вот пример:

// DataContext.js
import React from "react";
const DataContext = React.createContext();
export default DataContext;
// ParentComponent.jsx
import React from "react";
import DataContext from "./DataContext";
const ParentComponent = () => {
  const handleDataSubmission = (data) => {
    // Handle the submitted data
    console.log(data);
  };
  return (
    <DataContext.Provider value={handleDataSubmission}>
      <ChildComponent />
    </DataContext.Provider>
  );
};
// ChildComponent.jsx
import React, { useContext } from "react";
import DataContext from "./DataContext";
const ChildComponent = () => {
  const onSubmit = useContext(DataContext);
  const handleSubmit = () => {
    const data = "Example data";
    onSubmit(data);
  };
  return <button onClick={handleSubmit}>Submit Data</button>;
};

Метод 3: Redux
Если ваше приложение использует Redux для управления состоянием, вы можете отправлять действия из дочернего компонента для обновления состояния родительского компонента. Вот пример:

// ParentComponent.jsx
import React from "react";
import { useDispatch } from "react-redux";
import { updateData } from "./actions";
const ParentComponent = () => {
  const dispatch = useDispatch();
  const handleDataSubmission = (data) => {
    dispatch(updateData(data));
  };
  return <ChildComponent onSubmit={handleDataSubmission} />;
};
// ChildComponent.jsx
import React from "react";
const ChildComponent = ({ onSubmit }) => {
  const handleSubmit = () => {
    const data = "Example data";
    onSubmit(data);
  };
  return <button onClick={handleSubmit}>Submit Data</button>;
};

Метод 4: генераторы событий
Источники событий предоставляют механизм публикации-подписки для связи между компонентами. Вы можете использовать такие библиотеки, как EventEmitter3 или mitt, для создания источника событий в родительском компоненте и подписки на события в дочернем компоненте. Вот пример использования библиотеки mitt:

// ParentComponent.jsx
import React from "react";
import mitt from "mitt";
const ParentComponent = () => {
  const emitter = mitt();
  const handleDataSubmission = (data) => {
    // Handle the submitted data
    console.log(data);
  };
  emitter.on("dataSubmitted", handleDataSubmission);
  return <ChildComponent emitter={emitter} />;
};
// ChildComponent.jsx
import React from "react";
const ChildComponent = ({ emitter }) => {
  const handleSubmit = () => {
    const data = "Example data";
    emitter.emit("dataSubmitted", data);
  };
  return <button onClick={handleSubmit}>Submit Data</button>;
};

Метод 5: хуки React
С появлением хуков React вы можете использовать хук useRefдля создания ссылки на функцию родительского компонента и вызова ее из дочернего компонента. Вот пример:

// ParentComponent.jsx
import React, { useRef } from "react";
const ParentComponent = () => {
  const handleDataSubmission = (data) => {
    // Handle the submitted data
    console.log(data);
  };
  const onSubmitRef = useRef(handleDataSubmission);
  return <ChildComponent onSubmit={onSubmitRef} />;
};
// ChildComponent.jsx
import React from "react";
const ChildComponent = ({ onSubmit }) => {
  const handleSubmit = () => {
    const data = "Exampledata";
    onSubmit.current(data);
  };
  return <button onClick={handleSubmit}>Submit Data</button>;
};

Метод 6: Всплывание событий
Система событий React поддерживает всплывание событий, что означает, что события, вызванные в дочерних компонентах, также будут распространяться вверх по дереву компонентов. Вы можете использовать это поведение, прикрепив обработчики событий к родительским компонентам и прослушивая события, создаваемые дочерними компонентами. Вот пример:

// ParentComponent.jsx
import React from "react";
const ParentComponent = () => {
  const handleDataSubmission = (event) => {
    // Handle the submitted data
    const data = event.target.value;
    console.log(data);
  };
  return (
    <div onClick={handleDataSubmission}>
      <ChildComponent />
    </div>
  );
};
// ChildComponent.jsx
import React from "react";
const ChildComponent = () => {
  return <input type="text" />;
};

Метод 7: сторонние библиотеки
Существует несколько сторонних библиотек, которые предоставляют решения для обмена данными и событиями между компонентами. Некоторые популярные из них включают Redux Saga, React Broadcast и React Event Bus. Эти библиотеки предлагают дополнительные функции и гибкость для обработки сложных сценариев.

В этой статье мы рассмотрели семь различных методов отправки данных и событий из дочернего компонента в его родительский компонент в React. Эти методы включают функции обратного вызова, Context API, Redux, генераторы событий, перехватчики React, всплывание событий и сторонние библиотеки. В зависимости от вашего конкретного варианта использования и требований проекта вы можете выбрать наиболее подходящий метод. Реализуя эти методы, вы можете улучшить интерактивность и поток данных в своих приложениях React.