Back to questions
Junior — Middle
67
Как применяется React Hook useContext и в чем его основная функция?
Answer from AI
sobes.tech AI
React Hook useContext используется для доступа к значению контекста в функциональных компонентах React.
Основная функция useContext — получить текущее значение контекста, созданного с помощью React.createContext, без необходимости использовать компонент <Context.Consumer>.
Пример использования:
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Кнопка</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
В этом примере ThemedButton получает значение темы из контекста и использует его для стилизации кнопки.
Таким образом, useContext упрощает доступ к глобальным данным, которые могут использоваться в разных компонентах без передачи пропсов.