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;

这是我的索引，应该显示“ 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;

我试图将提供程序放在索引组件中，但是不幸的是，它也不起作用。大多数情况下，我遵循该文档，并且我认为我做得很好，哈哈

Answer 1

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

当React渲染一个订阅此Context对象的组件时，它将从树中它上面最接近的匹配Provider读取当前上下文值。 -Context API

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

反应-上下文

1 个答案: