Как использовать контекст в React.js?

@ally 

Контекст в React.js позволяет передавать данные, такие как состояние или функции, из родительского компонента во все его дочерние компоненты без необходимости передавать их через промежуточные компоненты.

Для использования контекста в React.js используется метод createContext(), который создает новый контекст. Этот метод возвращает два компонента: Provider и Consumer.

Provider позволяет установить значение контекста, которое будет доступно всем потомкам компонента, обернутого в Provider.

Consumer позволяет использовать значение контекста, передаваемого из родительского компонента, внутри его дочерних компонентов.

Пример использования контекста в React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// Создаем контекст
const MyContext = React.createContext();

// Компонент, который будет предоставлять значение контекста
function MyProvider(props) {
  const [state, setState] = useState('initialState');
  return (
    <MyContext.Provider value={{state, setState}}>
      {props.children}
    </MyContext.Provider>
  );
}

// Компонент, который будет использовать значение контекста
function MyConsumer() {
  return (
    <MyContext.Consumer>
      {({state, setState}) => (
        <div>
          <p>State: {state}</p>
          <button onClick={() => setState('newState')}>
            Set New State
          </button>
        </div>
      )}
    </MyContext.Consumer>
  );
}

// Используем компоненты внутри приложения
function App() {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  );
}

В этом примере мы создали контекст, который содержит состояние и функцию для изменения состояния. Затем мы создали компонент MyProvider, который устанавливает значение контекста и обернули в него другой компонент MyConsumer, который использует значение контекста для отображения состояния и выполнения изменений. В конечном итоге мы используем MyProvider внутри компонента App, чтобы сделать значение контекста доступным для всего приложения.