在React中加载登录首页

Posted 2021-04-19

这是我的应用程序的结构。

const App = () => {
    // localStorage.setItem('isLoggedIn', false);
    // const isLoggedIn = localStorage.getItem('isLoggedIn');
    const isLoggedIn = true;

    if(isLoggedIn === false){
        return <Content/>
    }
    return <Dashboard/>

};

如果用户登录，则显示Dashboard，否则显示Content。这是Content的结构。

const Content = (props) => {
    const [isNew, setIsNew] = useState(true);
    return (
        <div className="wrapper">
            {isNew ? <SignUp setIsNew={setIsNew} /> : <SignIn setIsNew={setIsNew} />}
        </div>
    );
};
export default Content;

此条件显示SignIn或SignUp。这是SignIn组件。

class SignIn extends React.Component {
    state={
        email: '',
        password: '',
        isLoggedIn: false
    };
    handleSubmit = async (event) =>{
        event.preventDefault();
        localStorage.setItem('email', this.state.email);
        const access_token = await getAccessToken(this.state.email, this.state.password);
        localStorage.setItem('access_token', access_token);
        localStorage.setItem('isLoggedIn', this.state.isLoggedIn);
        console.log(access_token);
    };


    render() {

        return (
            <div className="sign-up">
                <h1>Sign In</h1>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="email">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="Enter email" value={this.state.email}
                                      onChange={event => this.setState({email: event.target.value})}/>
                        <Form.Text className="text-muted">
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="password">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" placeholder="Password" value={this.state.password}
                                      onChange={event => this.setState({password: event.target.value})}/>
                    </Form.Group>
                    <Form.Group controlId="formBasicCheckbox">
                        <Form.Check type="checkbox" label="Remember me" value={this.state.isLoggedIn}
                                    onChange={event => this.setState({isLoggedIn: event.target.value})}/>
                    </Form.Group>
                    <Button variant="primary" type="submit" >
                        Sign In
                    </Button>
                    <hr/>
                    <button onClick={() => this.props.setIsNew(true)}>
                        If you don't have an account, Sign Up
                    </button>
                </Form>

            </div>
        )
    }
}

我想在成功Dashboard时渲染SignIn组件。我该怎么办？

答案

您可以在Content和SignIn的道具中定义一个回调函数。当用户登录时，您可以调用该函数以通知Content，然后返回Content以其道具（由App提供）来调用回调函数。