Question

＆＃13;

import React,{ Component } from 'react';
import Login from './login';
import ChatScreen from './chatscreen'

export default class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            isLoggedIn :false
        }
    }

    getLoginStatus(status){
        this.setState({isLoggedIn:status});
    }

    showScreen(){
      
        if(this.state.isLoggedIn)
            return (
             <ChatScreen checkStatus={(status)=>{this.getLoginStatus(status)}}/>)
        else if(this.state.isLoggedIn===false)
        return (
            <Login checkStatus={(status)=>{this.getLoginStatus(status)}} />
            )
            
            
    }
   
	render(){
        return this.showScreen()
    }

}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

所以，我的探索就是这个。我使用谷歌的登录API来检测用户是否已登录。当他登录时，他会看到他的主页上有一个退出按钮。

当他点击“注销”按钮时，他的实例被抓取并且该实例上调用了signOut函数，并且用户已注销。

现在，为了返回登录界面，我已经定义了父组件的状态，并将函数调用传递回每个登录和登录屏幕，从那里他们使用{{1}调用函数}。更改父组件的状态，并根据其状态重新呈现父级，显示登录屏幕或登录屏幕。

我正确登录屏幕。但是当我签署用户时，我无法使用this.props.checkStatus()调用回调，因为我在嵌套回调中调用它。

请在调用singOut（）后立即调用this.props.checkstatus（false）。

＆＃13;

this.props

＆＃13;

import React,{ Component } from 'react';


export default class App extends Component{


 componentDidMount(){
     document.getElementById("signOut").addEventListener("click",this.logOut.bind(this));
    
}

    logOut(status){
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            console.log("outlog");
             this.props.checkStatus(false);
          });
         
     }
    

	render(){
        return <button id="signOut">out</button>
        
    }

}

＆＃13;

解决方案 观看此视频，了解其工作原理https://www.youtube.com/watch?v=QQ4__W9nELc

我使用的是ecmascript 6功能或者像这样绑定了这个上下文。

使用ES6箭头功能

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

或使用 BIND

＆＃13;

logOut(){
        
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(()=>{
            this.props.checkStatus(false);
        });
        
     }

＆＃13;

警告

避免保存您的上下文，例如

＆＃13;

logOut(){
        
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function(){
            this.props.checkStatus(false);
        }.bind(this));
        
     }

＆＃13;

Answer 1

import React, { Component } from 'react';

export default class App extends Component {

    componentDidMount() {
        document.getElementById("signOut").addEventListener("click", this.logOut.bind(this));
    }

    logOut(status) {
        // Supposing your checkStatus method is in props
        var me = this; //Saving Context of your Component here
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function() {
            // this here points to the callback method after signOut
            // has performed its task. So this will point to that
            // context. 
            console.log("outlog");
            me.props.checkStatus(false); // Here we used the context saved 
            //above so we can access the required method.
        });

    }

    render() {
        return <button id = "signOut" > out < /button>
    }
}

在调用checkStatus之前，只需保存应用的上下文。

无法访问函数的是嵌套调用（React）

1 个答案: