我已经更新了小提琴

React 的美妙之处在于分离状态。我是这样想的：

所以 Parent 变成（现在将函数传递给 SideBar ）

 var Parent = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  render: function() {
    return (
        <Header onClick={this.handleViewSidebar} />
        <SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
        <Content isOpen={this.state.sidebarOpen} />
而 SideBar 变成（添加一个调用该函数的按钮）：
 var SideBar = React.createClass({
  render: function() {
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
    return (
      <div className={sidebarClass}>
        <div>I slide into view</div>
                <div>Me too!</div>
        <div>Meee Threeeee!</div>
        <button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
原文由 David Gilbertson 发布，翻译遵循 CC BY-SA 3.0 许可协议