Как можно обмениваться данными между компонентами: от родителя к дочернему, от дочернего к родителю, между дочерними?

Обмен данными между компонентами в фронтенде обычно реализуется так:

• От родителя к дочернему: через передачу props (свойств). Родитель передаёт данные дочернему компоненту как параметры.

• От дочернего к родителю: через callback-функции, переданные родителем в дочерний компонент. Дочерний вызывает эту функцию, передавая данные обратно.

• Между дочерними компонентами: обычно через общего родителя. Один дочерний компонент вызывает callback, родитель обновляет состояние, которое передаётся другому дочернему через props. В более сложных случаях используют глобальное состояние (Redux, Context API) или события.

Пример на React:

function Parent() {
  const [childData, setChildData] = React.useState(null);

  function handleChildData(data) {
    setChildData(data);
  }

  return (
    <>
      <ChildA onData={handleChildData} />
      <ChildB data={childData} />
    </>
  );
}

function ChildA({ onData }) {
  return <button onClick={() => onData('данные от ChildA')}>Отправить данные</button>;
}

function ChildB({ data }) {
  return <div>Получено: {data}</div>;
}