1

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

这样：

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

4

1 回答 1

0

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.

于 2015-04-27T19:43:24.770 回答