React.js component creating parent child relations and iterating

Question

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.

Such that:

<MyComponent id="1>
 <div>
  <MyComponent id="2">
   <div>
    <MyComponent id="3"></MyComponent>
   </div>
   <div>
    <MyComponent id="4"></MyComponent>
   </div>
  </MyComponent>
 </div>
</MyComponent>

Basically what I need, is a way to traverse the tree of MyComponents (traversal is logically controlled).

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:

var MyComponent_1 = React.createClass({
  initialState: function(){ return {currentObject: 0} },
  parentCallback: function(x){ /* traversal logic */ },
  render: function(){
    var nodes=[];
    for(var i=0;i<RepeatParam;i++) nodes.push((<div><MyComponent_2 parent={parent}></MyComponent_2></div>));
    return nodes; 
  }
});

var MyComponent_2 /** just like the above */

Another method was to add function closures, something like this:

var $parent=0, parent=0;
<div>
(function(){parent=$parent;$parent=1;
return (<MyComponent parent={parent}>
<div>
(function(){parent=$parent;$parent=2;
<MyComponent parent={parent}></MyComponent>
})()
</div></MyComponent>}))()</div>

Yet another method was to use global variables and inject them into the createClass.

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?

Why do you want to traverse the tree of components? A more concrete example would be helpful. — Sophie Alpert, Dec 23 '13 at 06:25
I need to execute within the scope of a component, and traverse between the components based on child/parent relationships. Such that when a component that represents a section has been "finished", it will go back to the parent component and look for the next component child to enter. — user120242, Dec 23 '13 at 09:52
How do you decide what the render? It must be based off some data or initial structure that you know, and that would be the more appropriate place to do a tree traversal. — Ross Allen, Dec 23 '13 at 17:44
I'm sending arbitrary HTML (with HTML->JSX transpiler) through the JSX compiler. Hence the only choice would be to a preprocess the HTML and generate code, which I would like to avoid. — user120242, Dec 24 '13 at 00:13

score 0 · Accepted Answer · answered Apr 27 '15 at 19:43

This can now be done using the "context" api

export class Hierarchy {
  contextTypes: {
     level: React.PropTypes.number
  }

  childContextTypes: {
    level: React.PropTypes.number
  }

  getChildContext() {
    return {
      level: this.context.level + 1
    };
  }

  render() {
    return <div>{this.context.level}{this.children}</div>;
  }
}

A combination of higher order components, contexts, and Flux makes it easier to implement.

React.js component creating parent child relations and iterating

1 Answers1

Linked