Блог

Я работаю над приложением React, пытаюсь вызвать родительский метод из дочернего компонента, некоторый код родительского компонента приведен ниже:

     class NavigationBar extends Component {
      constructor(props){
        super(props);
        this.state={isLoggedIn: false};
      }

      updateLoginState(){
        alert("Login from NavigationBar");
      }

      GetBar() {
          //const isLoggedIn = this.props.isLoggedIn;
          if (false){   //isLoggedIn
            return this.UserNavBar();
          }
          return this.StrangerNavBar();
      }

      StrangerNavBar(){
        return (

          <div>
            <HashRouter>    
              <div>
              {/* ... */}     
                <div className="content">
                  <Route exact path="/LoginCC" loginUpdate={this.updateLoginState} component={LoginCC} />
                </div>
              </div>
            </HashRouter>
          </div>    
      );
      }


    render() {
      return (
        this.GetBar()
      );
    }

  }

  export default NavigationBar;
  

Предполагается, что этот компонент перенаправляет пользователя на разные страницы контента в зависимости от того, авторизован он в системе или нет, используя Router . При нажатии кнопки должен быть вызван LoginCC.js метод updateLoginState , который пока просто отображает сообщение. Дочерняя страница содержимого LoginCC.js выглядит следующим образом:

 class LoginCC extends Component {

  constructor(props){
    super(props);
    this.state = {isLoggedIn: false};
  }

  render() {
    return (
      <div>
        <HashRouter>
          {/* ... */}       
              <Button variant="primary" size="lg" block onClick={this.props.loginUpdate}>
                Log in
              </Button> 
          {/* ... */}    
        </HashRouter>
      </div>
    );
  }
}

export default LoginCC;
  

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

Я неправильно передаю prop или что-то еще я пропустил? Я новичок в React, поэтому приветствую любую помощь.

Route не передает компонентам никаких пользовательских реквизитов. Для передачи функций следует использовать другой метод.

Одним из решений является:

 <Route exact path="/LoginCC" render={
    props => <LoginCC {...props} loginUpdate={this.updateLoginState}/>
} />
  

Обратите внимание, что updateLoginState не будет получено this при вызове. Вы должны либо bind это сделать, либо объявить как функцию со стрелкой, чтобы получить правильное this значение.

Также проверьте контекстную документацию.