Реагировать - использоватьContext внутри класса - PullRequest
Новая
       26

Реагировать - использоватьContext внутри класса

0 голосов
/ 29 апреля 2020

Я новичок ie в реакции, и я хочу использовать useContext внутри моего класса, как мне решить эту проблему? Это пример моего текущего кода прямо сейчас 

import { Context } from '../context/ChatListContext'

const ChatList = ({ onAction }) => {
    const {state, fetchChatList} = useContext(Context)

И я ожидаю того же для моего класса 

import { Context } from '../context/ChatListContext'

class MainScreen extends Component {

//const {state, fetchChatList} = useContext(Context) *how do i declare this?

  constructor(props) {
    super(props)
    this.state = { loading: true, showAction: false }
    setTimeout(() => {
      StatusBar.setBackgroundColor(primary)
    }, 100)
  }
...
}

Может кто-нибудь просветить меня?

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

useContext - это ловушка, которую нельзя использовать в компоненте класса. Для компонента класса вы определяете static contextType

import { Context } from '../context/ChatListContext'

class MainScreen extends Component {

 static contextType = Context

  constructor(props) {
    super(props)
    this.state = { loading: true, showAction: false }
    setTimeout(() => {
      StatusBar.setBackgroundColor(primary)
    }, 100)
  }
...
  render() {
       const {state, fetchChatList} =this.context;
  }
}
0 голосов
/ 29 апреля 2020

Привет, вот как вы можете использовать ловушку useContext. Пожалуйста, проверьте этот пример:

Компонент приложения 

import React, {useState} from 'react';
import Child from "./parent-child/Child";

export const MyContext = React.createContext();

class App extends React.Component {

    render(){
        return (
            <MyContext.Provider value={"Khabir"}>
                <Child/>
            </MyContext.Provider>
        );
    }

}
export default App;

Дочерний компонент 

import React, {useContext, useEffect, useState} from 'react';
import {MyContext} from "../App";

function Child(props) {
    const value = useContext(MyContext);
    return (
        <div>
            <hi>Hi {value}</hi>
        </div>
    );
}
export default Child;
...