Question

我正在开发一个React App，试图从子组件中调用父方法，下面是父组件的一些代码：

    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。

还要检查Context documentation。

ReactJS，React-Router：调用父函数

1 个答案: