Чтобы передать состояние от родительского компонента дочернему компоненту в React, доступно несколько методов. Вот некоторые часто используемые подходы:

1. Props. Самый распространенный метод — передать состояние в виде реквизита из родительского компонента дочернему компоненту. В родительском компоненте вы можете определить состояние и передать его дочернему компоненту в качестве свойства. Дочерний компонент затем сможет получить доступ к состоянию и использовать его через свои свойства.

Пример:

// Parent component
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const [state, setState] = useState('Initial state');
  return <ChildComponent state={state} />;
};
// Child component
const ChildComponent = (props) => {
  return <div>{props.state}</div>;
};

2. Context API: Контекстный API React позволяет вам делиться состоянием между компонентами без явной передачи реквизитов через все уровни дерева компонентов. Вы можете создать контекст в родительском компоненте, предоставить ему значение, а затем получить доступ к этому значению в дочернем компоненте.

Пример:

// Parent component
import React, { createContext, useState } from 'react';
import ChildComponent from './ChildComponent';
export const MyContext = createContext();
const ParentComponent = () => {
  const [state, setState] = useState('Initial state');
  return (
    <MyContext.Provider value={state}>
      <ChildComponent />
    </MyContext.Provider>
  );
};
// Child component
import React, { useContext } from 'react';
import { MyContext } from './ParentComponent';
const ChildComponent = () => {
  const state = useContext(MyContext);
  return <div>{state}</div>;
};

3. Библиотеки управления состоянием. Вы можете использовать библиотеки управления состоянием, такие как Redux или MobX, для управления состоянием и совместного использования его между компонентами. Эти библиотеки предоставляют централизованное хранилище, где вы можете хранить и получать состояние любого компонента приложения.

Пример использования Redux:

// Parent component
import React from 'react';
import { connect } from 'react-redux';
import ChildComponent from './ChildComponent';
const ParentComponent = ({ state }) => {
  return <ChildComponent state={state} />;
};
const mapStateToProps = (state) => ({
  state: state.myState,
});
export default connect(mapStateToProps)(ParentComponent);
// Child component
const ChildComponent = (props) => {
  return <div>{props.state}</div>;
};