Реагировать - Контекст

Question

У меня проблема с React - Context. Сейчас я просто хочу передать значение 'hello', но, к сожалению, оно не находит значение.

Это мой контекст:

import React from 'react';

const MovieContext = React.createContext();

class MovieProvider extends React.Component{

    constructor(props){
        super(props)

        this.state={

        };
    };

    render() { 
        return ( 
            <MovieContext.Provider value={'hello'}>
                {this.props.children}
            </MovieContext.Provider>
         );
    }
}

export {MovieProvider,  MovieContext};

Вот мой макет, который собирает моего провайдера:

import React from 'react';
import Header from './Header';
import { MovieProvider } from './context';



class Layout extends React.Component{
    render(){
        return(

            <MovieProvider>
                <>
                    <Header/>
                    {this.props.children} 
                </>

            </MovieProvider>


        )
    }   
}

export default Layout;

А вот мой индекс, который должен отображать 'привет':

import React from 'react';
import Layout from '../components/Layout';
import {MovieContext} from '../components/context';

class Index extends React.Component{

    static contextType = MovieContext

    render(){

        const value = this.context;
        console.log(value)
        return(

            <div>
                <Layout>
                    {value}
                    <h1>Home Page</h1>
                </Layout>
            </div>
        )
    }
}

export default Index;

Я пытался добавить провайдера в свой компонент индекса, но, к сожалению, он тоже не работает. В основном я следовал за do c и думал, что все сделал хорошо, ха-ха

Answer 1

value недопустим в компоненте Index, так как в соответствии с Context API вы должны использовать Context.Consumer в любом дочернем элементе Context.Provider для ссылки на значение контекста.

Когда React рендерит компонент, который подписывается на этот объект Context, он будет считывать текущее значение контекста из ближайшего соответствующего провайдера над ним в дереве. - Контекст API

class Layout extends React.Component {
  render() {
    return (
      <MovieProvider>
        <MovieContext.Consumer>
          {value => (
            <>
              {value}
              <h1>Home Page</h1>
            </>
          )}
        </MovieContext.Consumer>
      </MovieProvider>
    );
  }
}