Question

我想从Mein组件中卸载Navbar组件，以便事件监听器也消失了。下面的一个示例（App.js），它可以工作，但是我不知道如何共享toShowNav函数来更改showNav值？

 toShowNav(value) {
   this.setState({ showNav: value });
 }

<Router history={this.history}>
  <Switch>
      {
        this.state.showNav && <NavBar />
      }
      <Route exact path="/" component={Home}  />
      <Route exact path="/Users" component={Usera} />
      <Route exact path="/Main" component={Main} />
  </Switch>
</Router>

Answer 1

您可以使用render道具将其他道具传递到组件：

toShowNav(value) {
  this.setState({ showNav: value });
}

<Router history={this.history}>
  <Switch>
    { this.state.showNav && <NavBar /> }
    <Route exact path="/" render={ props => 
      <Home {...props} toShowNav={this.toShowNav} /> }  
    />
    <Route exact path="/Users" render={ props =>
      <Users {...props} toShowNav={this.toShowNav} /> }
    />
    <Route exact path="/Main" render={ props =>
      <Main {...props} toShowNav={this.toShowNav} /> }
    />
  </Switch>
</Router>

与React Router共享功能给所有路由

1 个答案: