Javascript 作为路由属性传递时，状态值未更新

我在react路由器的版本3中遇到了一个问题，在该版本中，我将状态作为路由上的一个道具传递，并通过单击处理程序更新父状态值

尽管在主组件中单击时父级sidebarOpen状态值发生变化，sidebarState值仍保持为初始值false

当路由器类中的状态发生变化时，是否有方法确保更新的状态值传递给接收组件

第一次单击：
sidebarOpen:错误
sidebarState:错误

var Home = React.createClass({
  handleViewSidebar: function(){  
    this.props.route.clickHandler();
    console.log('sidebarState:' + this.props.route.sidebarState);
  },
  render: function() {
    return (
       <div>
         <Header onClick={ this.handleViewSidebar } />
         <SideBar isOpen={ this.props.route.sidebarState } onClick={ this.handleViewSidebar } />
         <Content isOpen={ this.props.route.sidebarState } />
       </div>
    );
  }
});



var App = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
    console.log('sidebarOpen:' + this.state.sidebarOpen);
  },
  render: function() {
    return (
      <Router history={ hashHistory }>
        <Route path="/"         
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Home }>Home</Route>
        <Route path="/about"    
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ About }>About</Route>
        <Route path="/contact"  
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Contact }>Contact</Route>
      </Router>
    );
  }
});


ReactDOM.render(<App />, document.getElementById('app'));

第二次单击：
sidebarOpen:正确
sidebarState:错误

var Home = React.createClass({
  handleViewSidebar: function(){  
    this.props.route.clickHandler();
    console.log('sidebarState:' + this.props.route.sidebarState);
  },
  render: function() {
    return (
       <div>
         <Header onClick={ this.handleViewSidebar } />
         <SideBar isOpen={ this.props.route.sidebarState } onClick={ this.handleViewSidebar } />
         <Content isOpen={ this.props.route.sidebarState } />
       </div>
    );
  }
});



var App = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
    console.log('sidebarOpen:' + this.state.sidebarOpen);
  },
  render: function() {
    return (
      <Router history={ hashHistory }>
        <Route path="/"         
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Home }>Home</Route>
        <Route path="/about"    
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ About }>About</Route>
        <Route path="/contact"  
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Contact }>Contact</Route>
      </Router>
    );
  }
});


ReactDOM.render(<App />, document.getElementById('app'));

第三次单击：
sidebarOpen:错误
sidebarState:错误

var Home = React.createClass({
  handleViewSidebar: function(){  
    this.props.route.clickHandler();
    console.log('sidebarState:' + this.props.route.sidebarState);
  },
  render: function() {
    return (
       <div>
         <Header onClick={ this.handleViewSidebar } />
         <SideBar isOpen={ this.props.route.sidebarState } onClick={ this.handleViewSidebar } />
         <Content isOpen={ this.props.route.sidebarState } />
       </div>
    );
  }
});



var App = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
    console.log('sidebarOpen:' + this.state.sidebarOpen);
  },
  render: function() {
    return (
      <Router history={ hashHistory }>
        <Route path="/"         
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Home }>Home</Route>
        <Route path="/about"    
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ About }>About</Route>
        <Route path="/contact"  
          sidebarState={ this.state.sidebarOpen } 
          clickHandler={ this.handleViewSidebar } 
          component={ Contact }>Contact</Route>
      </Router>
    );
  }
});


ReactDOM.render(<App />, document.getElementById('app'));

var Home=React.createClass({
handleViewSidebar:函数（）{
this.props.route.clickHandler（）；
log（'sidebarState:'+this.props.route.sidebarState）；
},
render:function（）{
返回(
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{sidebarOpen:false}；
},
handleViewSidebar:函数（）{
this.setState（{sidebarOpen:！this.state.sidebarOpen}）；
console.log（'sidebarOpen:'+this.state.sidebarOpen）；
},
render:function（）{
返回(
家
关于
接触
);
}
});
ReactDOM.render（，document.getElementById（'app'））；

我的建议是重组组件，以便：

• 仅处理路由的根组件

• 一个应用程序组件，将包含其他路由的组件以及句柄边栏逻辑和状态

• 其他组件（Home、About、Contact）将是应用程序的子路由，因此可以通过道具继承状态和处理程序

然后，您可以通过

this.props.children

属性（当您在其他路由中嵌套路由时，React Router为应用程序提供该属性），然后使用创建子级并通过props为它们分配状态和处理程序

因此，您的代码如下所示：

var Routes = React.createClass({
  render: function() {
    return (
      <Router history={ hashHistory }>
        <Route path="/" component={App}>
          <IndexRoute component={ Home }>Home</Route>
          <Route path="/about" component={ About }>About</Route>
          <Route path="/contact" component={ Contact }>Contact</Route>
        </Route>
      </Router>
    );
  }
});

var App = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){  
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  },
  render: function() {
    const childWithProps = 
      React.Children.map(
        this.props.children, 
          child => {
            return (
              React.cloneElement(child, {
                sidebarOpen : this.state.sidebarOpen,
                handleViewSidebar: this.handleViewSidebar
              }
            )
          }
      )
    return (
       <div>
         {childWithProps}
       </div>
    );
  }
});





ReactDOM.render(<App />, document.getElementById('app'));

var Routes=React.createClass({
render:function（）{
返回(
家
关于
接触
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{sidebarOpen:false}；
},
handleViewSidebar:函数（）{
this.setState（{sidebarOpen:！this.state.sidebarOpen}）；
},
render:function（）{
常量childWithProps=
React.Children.map(
这个，道具，孩子们，
孩子=>{
返回(
反应。克隆元素（儿童{
sidebarOpen:this.state.sidebarOpen，
handleViewSidebar:this.handleViewSidebar
}
)
}
)
返回(
{childWithProps}
);
}
});
ReactDOM.render（，document.getElementById（'app'））；

@azium:抓得好。