title: React.js component creating parent child relations and iterating
body: <p>I'm trying to have a component that can find parent/child components of the same type.
  These components will also have to be "repeatable" programmatically.</p>
  
  <p>Such that:</p>
  
  <pre><code>&lt;MyComponent id="1&gt;
   &lt;div&gt;
    &lt;MyComponent id="2"&gt;
     &lt;div&gt;
      &lt;MyComponent id="3"&gt;&lt;/MyComponent&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;MyComponent id="4"&gt;&lt;/MyComponent&gt;
     &lt;/div&gt;
    &lt;/MyComponent&gt;
   &lt;/div&gt;
  &lt;/MyComponent&gt;
  </code></pre>
  
  <p>Basically what I need, is a way to traverse the tree of MyComponents (traversal is logically controlled).</p>
  
  <p>I can pass control/parameters to the parent component, or have the parent component pass control/parameters to children components in a predefined order (based on data).
  I have two methods to do this, both involve preprocessors.
  One is a preprocessor that generates a new Component for each MyComponent found, with some boilerplate.  Something like:</p>
  
  <pre><code>var MyComponent_1 = React.createClass({
    initialState: function(){ return {currentObject: 0} },
    parentCallback: function(x){ /* traversal logic */ },
    render: function(){
      var nodes=[];
      for(var i=0;i&lt;RepeatParam;i++) nodes.push((&lt;div&gt;&lt;MyComponent_2 parent={parent}&gt;&lt;/MyComponent_2&gt;&lt;/div&gt;));
      return nodes; 
    }
  });
  
  var MyComponent_2 /** just like the above */
  </code></pre>
  
  <p>Another method was to add function closures, something like this:</p>
  
  <pre><code>var $parent=0, parent=0;
  &lt;div&gt;
  (function(){parent=$parent;$parent=1;
  return (&lt;MyComponent parent={parent}&gt;
  &lt;div&gt;
  (function(){parent=$parent;$parent=2;
  &lt;MyComponent parent={parent}&gt;&lt;/MyComponent&gt;
  })()
  &lt;/div&gt;&lt;/MyComponent&gt;}))()&lt;/div&gt;
  </code></pre>
  
  <p>Yet another method was to use global variables and inject them into the createClass.</p>
  
  <p>All of these methods seem wrong, and as if I have a very big misunderstanding of how React should work.  Is there a more elegant way to be able to traverse the tree of components, and what is the anti-pattern I am committing; how should I be doing this?</p>