ReactJS, React-Router: вызов родительской функции

Question

Я работаю над приложением 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, поэтому при появлении сообщения должно появиться сообщение.нажмите кнопку, но ничего не происходит.

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

Answer 1

Route не передает какие-либо пользовательские реквизиты для компонентов.Вы должны использовать другой метод для передачи функций.

Одно из решений:

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

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

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