Javascript 从另一个组件设置状态

我在index.js中有以下结构：

我想在登录组件操作处理程序（即handleLogin）中将MyAppBar状态验证标志更新为true，但我不知道如何更新

我尝试过在登录页面上导入MyAppBar（所有组件），但它说

MyAppBar.handleLogin(); 

不是一个函数。。。谢谢大家!

---

谢谢大家!

登录应该是MyAppBar的子组件。然后可以将handleLogin函数作为道具传递给登录

您应该使用REDUX

主要是因为它允许您拥有任何组件都可以读取或同步的状态

我很少使用react的state/setState

---

在大多数情况下，redux状态很适合更改/监视

在这种情况下最好使用redux，因为这使得组件之间的通信非常容易。否则，如果您想继续努力，那么创建一个父组件，它将包装login和MyAppBar

  class ParentComp extends Component{
      constructor(props){ 
         super(props);
         this.state={
             isLoggedIn:false
         };
        this.setLoginState=this.setLoginState.bind(this);
      }
      setLoginState(value){
          this.setState({isLoggedIn:value});
      }

       render(){
         return(<div>
                   <MyAppBar isLoggedIn={this.state.isLoggedIn} />
               <Route path={path} render={props=><Login {..props} setLoginState={this.setLoginState}/>}/>
                </div>);
       }
  }

在myappbar组件中 使用isLoggedIn属性有条件地渲染

   renderLogin(){
     if(this.props.isLoggedIn){ 
          // return loggedin jsx
     }else{
         return the alternative
     }
   }

---

我认为对于这个简单的范例，您不需要经历设置redux的所有麻烦（我喜欢redux，但有时我们不必使用它）

下面是如何使用新的

上下文实现它


它非常简单，使用起来也很好。检查一下
如果不清楚，请告诉我

您可以使用新的React上下文api来实现这一点。基本上，你应该将你的
MyAppBar
包装在
提供者
中，将你的
登录名
包装在
消费者
中。如果这还不够清楚，请告诉我。在这种情况下最好使用redux，因为这使得组件之间的通信非常容易，这就是我要做的。非常感谢你！您好，海报有问题，因为组件不能是子组件。很高兴提供帮助：）很好的解决方案。干净利落！我真的很喜欢这个新的api和它的流程：）哦，谢谢@KhurshidAnsari的评论，我不知道为什么url会被弄乱！！！刚刚更新：）这就是我要做的！非常感谢。我将使用Redux，但非常感谢您提供了这个替代解决方案。
  class ParentComp extends Component{
      constructor(props){ 
         super(props);
         this.state={
             isLoggedIn:false
         };
        this.setLoginState=this.setLoginState.bind(this);
      }
      setLoginState(value){
          this.setState({isLoggedIn:value});
      }

       render(){
         return(<div>
                   <MyAppBar isLoggedIn={this.state.isLoggedIn} />
               <Route path={path} render={props=><Login {..props} setLoginState={this.setLoginState}/>}/>
                </div>);
       }
  }

   this.props.setLoginState(true);

   renderLogin(){
     if(this.props.isLoggedIn){ 
          // return loggedin jsx
     }else{
         return the alternative
     }
   }