score:1

Accepted answer
var MainLayout = React.createClass({
  doSomething: function() {
    console.log('something happened');
  },

  render: function() {
    this.doSomething();
    const childrenWithProps = React.Children.map(this.props.children,
     (child) => React.cloneElement(child, {
       doSomething: this.doSomething
     })
    );

    return (
      <div className="app">
        <header className="primary-header"></header>
        <aside className="primary-aside">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/users">Users</Link></li>
            <li><Link to="/widgets">Widgets</Link></li>
          </ul>
        </aside>
        <main>
          {childrenWithProps}
        </main>
      </div>
      )
  }
})

var Home = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
})

var SearchLayout = React.createClass({
  render: function() {
    const childrenWithProps = React.Children.map(this.props.children,
      (child) => React.cloneElement(child, {
       doSomething: this.props.doSomething
     })
    );

    return (
      <div className="search">
        <header className="search-header"></header>
        <div className="results">
          {childrenWithProps}
        </div>
        <div className="search-footer pagination"></div>
      </div>
      )
  }
})

var UserList = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        User List
        <br />
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
});

var WidgetList = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        Widgets
        <br />
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
})



ReactDOM.render((
  <Router>
    <Route path="/" component={MainLayout}>
      <IndexRoute component={Home} />
      <Route component={SearchLayout}>
        <Route path="users" component={UserList} />
        <Route path="widgets" component={WidgetList} />
      </Route> 
    </Route>
  </Router>
), document.getElementById('root'))

Related Query

More Query from same tag