Установить состояние из другого компонента React js

Question

У меня есть следующая структура в index.js :

<MyAppBar // + properties/>
 <Route path={path} component={Login}/>

MyAppBar.js

 class MyAppBar extends React.Component {

state = {
  auth: false,
  anchorElement: null
};

handleLogin(){
  this.setState({auth:true});
}

//another code
//end component

export default withStyles(styles)(MyAppBar)

Я хочу обновить MyAppBar state auth помечается как true из обработчика действия компонента Login (то есть handleLogin ), ноЯ не знаю как.

Я пытался импортировать MyAppBar (все компоненты) на странице Login , но там говорится, что

MyAppBar.handleLogin(); 

это не функция ... Спасибо!

Спасибо!

Answer 1

Я не думаю, что для этой простой парадигмы вам нужно будет пройти через все хлопоты по настройке приращения (я люблю Redux, но иногда нам не нужно его использовать)

Вот какВы можете реализовать его с новым context.

Это очень просто и удобно в использовании.Проверьте это здесь Дайте мне знать, если это не ясно.

Answer 2

Вы должны использовать REDUX.

Главным образом потому, что он позволяет вам иметь состояние, которое любой компонент может прочитать или с которым можно синхронизировать.

Я редко использую реагирующее состояние / setState.

В большинстве случаев избыточное состояние хорошо менять / смотреть.

Answer 3

В таких сценариях лучше использовать избыточность, так как это делает связь между компонентами очень простой.Иначе, если вы хотите пойти трудным путем, то создайте родительский компонент, который обернет как 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>);
       }
  }

в вашем LoginComponent, вызовите метод setLoginState

   this.props.setLoginState(true);

ив вашем компоненте myappbar используйте реквизит isLoggedIn для условного рендеринга

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

Answer 4

Логин должен быть дочерним компонентом MyAppBar.Тогда вы можете передать функцию handleLogin в качестве реквизита для входа в систему.