检查登录状态并根据其更改导航栏文本（React.js）

Question

我在React上创建了一个登录和注册表单。 看起来像：

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            isLoading: false
        };

        this.handleClick = this.handleClick.bind(this);
    }


    handleClick(){

        var self = this;

        axios.post('http://localhost:5000/signin', 
        {
            username:this.state.username, 
            password:this.state.password
        })
            .then(function (response) {

            console.log(response);
            if(response.data.status === "Successful"){
                console.log("Login successfull");
            }

            else{
                console.log("There is no user with the given username and password");
                //alert("Username does not exist");
            }
            }
        )
        .catch(function (error) {

        console.log(error);
        });
    }

    render() {

        return (
            <div>
            <MuiThemeProvider>
              <div>
               <TextField
                 hintText="Enter your Username"
                 floatingLabelText="Username"
                 onChange = {(event,newValue) => this.setState({username:newValue})}
                 />
               <br/>
                 <TextField
                   type="password"
                   hintText="Enter your Password"
                   floatingLabelText="Password"
                   onChange = {(event,newValue) => this.setState({password:newValue})}
                   />
                 <br/>
                 <RaisedButton label="Submit" primary={true} style={style} onClick={this.handleClick}/>
             </div>
             </MuiThemeProvider>
          </div>
    );
}
}   

export default LoginForm;

只要我正确登录，它就会给我成功的答复。

我想问的是，如何将登录状态传递给另一个组件并基于该组件进行渲染？ 例如，我想将文本“ Sign in更改为“ Sign out时注销”。 我的导航栏组件看起来像：

const Link = props => (
  <NavLink className="nav-link" {...props}>
    <div className="link-container">
      <div>
        <div>{props.children}</div>
      </div>
    </div>
  </NavLink>
);

const Navbar = () => (
  <div className="navbar">
    <div className="logo-container">
    </div>

    <div className="left-link-container">
      <Link to="/i/#">ABOUT</Link>
      <Link to="/i/#">MENU 2</Link>
      <Link to="/i/#">MENU 3</Link>
    </div>

    <div className="right-link-container">
      <Link to="/signin">Sign In</Link>
      <Link to="/signup">Register</Link>
    </div>
  </div>
);

export default Navbar;

我该如何解决？

Answer 1

您可以通过在这些组件之间使用任何公共的可共享状态来实现。 这意味着您具有以下状态：

const state = {
    isAuthenticated: false,
}

然后，您应该将此isAuthenticated传递给所需的所有组件。 另外，您需要添加一些功能来更改状态。

实现这种事情的可能方法：

• 上面写有状态的通用父组件将isAuthenticated传递给子组件。

• 使用redux是拥有可共享状态的完美方法。

• 使用React.Context通过上下文提供状态。