Метод доступа к API React Context из метода «Дети» - PullRequest
Новая
       38

Метод доступа к API React Context из метода «Дети»

1 голос
/ 04 мая 2020

Я новичок в React и пытаюсь создать контекстный API. Я прочитал похожий вопрос, но не могу найти решение.

Мой файл провайдера контекста: 

import React, { Component } from 'react'

    const MyContext = React.createContext();

    class ContextProvider extends Component {

        constructor(props) {
          super(props)

            this.state = {
               isLogin: false
            }   
        }  

        handleLogin = () => {   
          this.setState({
              isLogin : true
          })              
        }


      render() {
        return (    
          <MyContext.Provider value={{
              ...this.state,
              handleLogin : this.handleLogin
              }}>
             {this.props.children}
          </MyContext.Provider>
        );
      }
    }

    const ContextConsumer = MyContext.Consumer;
    export {ContextProvider, ContextConsumer};

Мне нужно изменить состояние, обратившись к handleLogin () в ContextProvider. js после успешного входа пользователя: 

import React, { Component } from 'react'
import {ContextConsumer} from "./ContextProvider";

class Login extends Component {

  onHandleSubmit = () => {

    // on submit login success :

    // --- how to call handleLogin() in ContextProvider.js here ? ----

  }

  render() { 
      return (
        <div> --- not expected here ---- </div>
     )
  }

}

Кстати, извините за мой Engli sh.

1 Ответ

1 голос
/ 04 мая 2020

Предполагая, что ваш компонент Login обернут на ContextProvider выше в иерархии, вы можете получить доступ к контексту внутри компонента класса, определив stati c contextType.

Для этого вам нужно экспортировать контекст из ContextProvider сначала похож на 

export {ContextProvider, ContextConsumer, MyContext };

, а затем использует его как 

import React, { Component } from 'react'
import {MyContext} from "./ContextProvider";
class Login extends Component {

  static contextType = MyContext;
  onHandleSubmit = () => {

    // on submit login success :

    this.context.handleLogin();

  }

  render() { 
      return (
        <div> {/* render content here */} </div>
     )
  }

}

Однако, если вы используете версию реакции между 16.3.0 и 16.6.0, вам нужно передать контекст используя шаблон реквизита рендера, например 

class Login extends Component {

  onHandleSubmit = () => {

    // on submit login success :

    this.props.context.handleLogin();

  }

  render() { 
      return (
        <div> --- not expected here ---- </div>
     )
  }

} 

export default (props) => (
    <ContextConsumer>
        {values=> <Login {...props} context={values} />}
    </ContextConsumer>
)
...