React.js 组件创建父子关系并迭代答案

【问题标题】：React.js component creating parent child relations and iteratingReact.js 组件创建父子关系并迭代
【发布时间】：2014-01-11 07:53:00
【问题描述】：

我正在尝试拥有一个可以找到相同类型的父/子组件的组件。这些组件还必须以编程方式“可重复”。

这样：

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

基本上我需要的是一种遍历MyComponents树的方法（遍历是逻辑控制的）。

我可以将控件/参数传递给父组件，或者让父组件以预定义的顺序（基于数据）将控件/参数传递给子组件。我有两种方法可以做到这一点，都涉及预处理器。一个是预处理器，它为找到的每个 MyComponent 生成一个新组件，并带有一些样板。比如：

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 */

另一种方法是添加函数闭包，如下所示：

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>

还有一种方法是使用全局变量并将它们注入到 createClass 中。

所有这些方法似乎都是错误的，好像我对 React 应该如何工作有很大的误解。有没有更优雅的方式可以遍历组件树，我提交的反模式是什么；我该怎么做？

【问题讨论】：

为什么要遍历组件树？一个更具体的例子会很有帮助。
我需要在一个组件的范围内执行，并根据子/父关系在组件之间进行遍历。这样当一个代表一个部分的组件已经“完成”时，它会回到父组件并寻找下一个要进入的组件子组件。
你如何决定渲染什么？它必须基于一些您知道的数据或初始结构，而这将是进行树遍历的更合适的位置。
我正在通过 JSX 编译器发送任意 HTML（带有 HTML->JSX 转译器）。因此，唯一的选择是对 HTML 进行预处理并生成代码，这是我想避免的。

标签： javascript reactjs

【解决方案1】：

现在可以使用“上下文”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>;
  }
}

高阶组件、上下文和 Flux 的组合使其更易于实现。

【讨论】：