Контекст в классовом компоненте (contextType)

В этом решении классовый компонент ThemeLabel подписан на ThemeContext через static contextType и читает тему из this.context. Проп theme больше не передаётся — значение приходит из контекста.

ThemeLabel с contextType

class ThemeLabel extends React.Component {
    static contextType = ThemeContext;

    render() {
        const theme = this.context;

        return (
            <span className="badge">
                <span className={theme === 'dark' ? 'dot' : 'dot dotAmber'} />
                Тема: {theme === 'dark' ? 'тёмная' : 'светлая'}
            </span>
        );
    }
}

Статическое свойство contextType указывает, какой контекст нужен компоненту. React записывает текущее значение этого контекста в this.context перед вызовом render. В render читаем theme из this.context и используем как раньше — только источник данных сменился с пропсов на контекст.

App без пропа theme для ThemeLabel

function App() {
    const [theme, setTheme] = React.useState('dark');

ThemeLabel вызывается без пропов — родитель не передаёт theme, компонент сам получает его из контекста через contextType. Провайдер по-прежнему передаёт value={theme}, а классовый потребитель подписан через contextType и читает это значение из this.context.