React.js組件創建父子關係和迭代

我想要一個組件可以找到相同類型的父/子組件。這些組件也必須以編程方式「可重複」。React.js組件創建父子關係和迭代

這樣的：

<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應該如何工作有一個很大的誤解。是否有一種更優雅的方式來遍歷組件樹，以及我正在提交的反模式是什麼;我應該怎麼做？

來源

2013-12-23 user120242

爲什麼要遍歷組件樹？更具體的例子會有所幫助。 –

我需要在組件範圍內執行，並根據子/父關係在組件之間進行遍歷。這樣，當表示一個部分的組件已經「完成」時，它將回到父組件並尋找下一個組件子進入。 – user120242

你如何決定渲染？它必須基於你知道的一些數據或初始結構，這將是更適合做樹遍歷的地方。 –

這現在可以使用「背景」 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>; 
    } 
}

高位成分，對上下文的組合來完成，並且流量使得它更容易實現。

來源

2015-04-27 19:43:24 user120242

React.js組件創建父子關係和迭代

回答

相關問題