反应语境

Question

我对反应环境有问题。现在，我只想传递‘’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;

这是我的索引，应该显示“hello”：

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;

我试图将提供程序放在我的Index组件中，但不幸的是，它也不起作用。大部分时间我跟着医生走，我以为我做得很好，哈哈。

Answer 1

value在Index组件中无效，因为根据Context API，您必须在任何Context.Provider的子组件中使用Context.Consumer来引用上下文的值。

当React呈现订阅此上下文对象的组件时，它将从树中最接近的匹配提供程序读取当前上下文值。- 上下文API

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

​

​