通过HOC将道具传递给父组件

时间:2019-07-12 07:59:55

标签: javascript reactjs react-router

我不确定我是否正确使用了HOC,但是在应用程序的最高级别上有state,需要从HOC中存在的子组件中进行更新。

my main app router that holds the state

class AppRouter extends React.Component {
  state = {
    selected: "",
  };

  updateSelected = selected => {
    this.setState({ selected });
  };
  updateReports = reports => {
    this.setState({ reports });
  };

  render() {
    return (
      <Router history={history}>
        <div>
          <div className="holygrail">
            <Header setIsAuth={this.setIsAuth} isAuth={this.state.isAuth} />
            <Switch>
              <PublicRoute
                path="/login"
                isAuth={this.state.isAuth}
                component={() => <Login setIsAuth={this.setIsAuth} />}
                exact={true}
              />
              <PrivateRoute
                path="/"
                selected={this.state.selected}
                isAuth={this.state.isAuth}
                updateSelected={this.updateSelected}
                updateReports={this.updateReports}
                component={Dashboard}
                exact={true}
              />
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default AppRouter;

我有一个PrivateRoute,然后有一个模板,其中包含一个nav,该模板不应显示在PublicRoute

export const PrivateRoute = ({ component: Component, isAuth, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      console.log("Private Route ", isAuth);
      return isAuth ? (
        <div className="holygrail-body">
          <Nav
            updateSelected={this.updateSelected} <-- how to pass these back up to AppRouter parent?
            updateReports={this.updateReports}
          />
          <Component {...props} />
        </div>
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      );
    }}
  />
);

export default PrivateRoute;

如何通过Nav道具来更新主要组件state

0 个答案:

没有答案