title: page scroll_to #id after component re-rendered in React
body: <p>I have a component JumpList, which is a side panel with links of two categorys (A an B), which each have subcategories (A1, A2, A3, and B1, B2, B3).  My component ReactPage combines the JumpList with the content for the page, which can either be ContentPageA or ContentPageB, which correspond to the major categories.  Each of these pages has headers which correspond to the subcategories (ex. A1, A2, and A3).</p>
  
  <p>If the state of ReactPage is {a: true} the ContentPageA is rendered and clicking any of the A1-A3 links causes the page to scroll down to where those headers are on the page.  Clicking any of B1-B3 changes the state of ReactPage to {a: false} and ContentPageB is rendered.  What I'd like is for to also do the same scroll effect that clicking the same page links do, but the IDs used to reference these spots on the page do not exist at the time the code is run because React is not done rendering the page after the state change.  </p>
  
  <p>Is there a way I can make it so that this process happens in a React-y way?  I could just hide the unused divs, and use toggling classes upon click, but that doesn't feel very Reacty (the truth of the DOM would change without a re-rendering)</p>
  
  <p>some example code:</p>
  
  <pre><code>var ReactPage = React.createClass({
    getInitialState: function() {
      return {
        a: true
      };
    },
  
    handlePageChange(id, a){
      if ( a ){
        if (this.state.a === false){
          this.setState({a: true});
        }
      }else {
        if (this.state.b === true){
          this.setState({a: false});
        }
      }
  
      $('html, body').animate({
        scrollTop: $("#" + id).offset().top
      }, 1000);
    }
  
    render: function(){
      var content;
      if (this.state.a) {
        content = &lt;ContentPageA&gt;&lt;/ContentPageA&gt;
      }else{
        content = &lt;ContentPageB&gt;&lt;/ContentPageB&gt;
      }
  
      return (
        &lt;div&gt;
          &lt;SideJumpPanel pageChangeCallback={this.handlePageChange}&gt;&lt;/SideJumpPanel&gt;
          {content}
        &lt;/div&gt;
      )
    }
  });
  
  
  var SideJumpPanel = React.createClass({
    propTypes: {
      pageChangeCallback: React.PropTypes.func
    },
  
    scrollTo: function(id){
      return function() {
        this.pageChangeCallback(id);
      }
    }
  
    render: function() {
      return (
        &lt;div&gt;
          Jump to:
          A:
          &lt;ul&gt;
            &lt;li onClick={this.scrollTo('A1', true)}&gt;A1&lt;/li&gt;
            &lt;li onClick={this.scrollTo('A2', true)}&gt;A2&lt;/li&gt;
            &lt;li onClick={this.scrollTo('A3', true)}&gt;A3&lt;/li&gt;
          &lt;/ul&gt;
          B:
          &lt;ul&gt;
            &lt;li onClick={this.scrollTo('B1', false)}&gt;B1&lt;/li&gt;
            &lt;li onClick={this.scrollTo('B2', false)}&gt;B2&lt;/li&gt;
            &lt;li onClick={this.scrollTo('B3', false)}&gt;B3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  });
  </code></pre>
  
  <p>(I may have left something out of the sample code, it's mainly just to illustrate)</p>