时间戳

首页 > 解决方案 > 反应出口 React.createContext 未定义

reactjs - 反应出口 React.createContext 未定义

问题描述

我正在尝试学习 React Context 并陷入困境。需要帮忙。

应用程序.js

import React from 'react';
import Header from './components/Header';

export const MyContext = React.createContext("Default");

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value="dark">
        <Header />
      </MyContext.Provider>
    );
  }
}

export default App;

标头/index.js

import React, { Component } from 'react'
import { MyContext } from "./../../App";

class Header extends Component {
    //static contextType = MyContext;
    render() {
        return (
            <div>
                {this.context}
            </div>

        )
    }
}

Header.contextType = MyContext;
export default Header;

出现错误MyContext is not defined。当我将 Header 类移动到 App.js 时它可以工作

我究竟做错了什么？Tnx 为您提供帮助

标签： reactjs

解决方案

有两种使用上下文的方法：

1.通过使用上下文消费者：

 <MyContext.Consumer>
    { 
       contextValue => {
              return <div>
                {value}
              </div>
         }
     }
 <MyContext.Consumer>

2.通过将上下文分配给对象：

static contextType = MyContext;
render(){
  const {value1,value2.......} = this.context
}

有关Context的更多信息，请访问 React 官方页面。 https://reactjs.org/docs/context.html

推荐阅读