Question

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

这样：

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

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

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

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应该如何工作有很大的误解。是否有更优雅的方式来遍历组件树，以及我提出的反模式是什么;我应该怎么做？

Answer 1

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

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

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

1 个答案: