时间戳

首页 > 解决方案 > 如何在 React js 的其他模块中为类组件使用上下文

reactjs - 如何在 React js 的其他模块中为类组件使用上下文

问题描述

当我在 Reactjs 中使用上下文时，通过使用钩子，我只能将“useContext”用于其他模块中的功能组件，但我想将它用于 --> 类组件 <-- 在其他模块中，但我不能这样做，并且在浏览器控制台我看到这个错误：==>>（（

ReferenceError: Cannot access 'MyContext' before initialization
Module.MyContext
http://localhost:3000/static/js/main.chunk.js:12:101
Module../src/news.js
F:/0 React Js project/my-appfirst-app/src/news.js:21

))

我们有什么方法可以在其他模块中使用类组件吗？

这些是我的代码

父组件：

import React,{createContext,Component} from 'react';
import ReactDOM from 'react-dom';
import Roots from './news'
import * as serviceWorker from './serviceWorker';


export let MyContext=createContext();

class Show extends Component{
  render(){
    return(
      <MyContext.Provider value={{name:'ali',family:'mohammady',done:'false'}} >
        <div className='container-main'>
          <Roots />
        </div>
      </MyContext.Provider>
    )
  }
}

ReactDOM.render(<Show />, document.getElementById('root'));

这个子模块：

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

class Roots extends Component{
  static  contextType = MyContext;
  render(){
    return(
      <>
        <p>{console.log(this.context)}</p>
      </>
    )
  }
}

export default Roots;

如果我将子组件放在父组件中，我想知道如何处理这些代码！？？

标签： reactjs

解决方案

您需要导出然后从上下文中导入消费者才能像那样使用它

export let MyContext=createContext();
export const MyContextConsumer = MyContext.Consumer

然后导入该消费者并使用它

import React,{ Component } from 'react';
import { MyContextConsumer } from './index'

class Roots extends Component{
  render(){
    return(
      <MyContextConsumer>
        {value => <p>{console.log(value)}</p>}
      </MyContextConsumer>
    )
  }
}

推荐阅读