[英]React.js call recursive function in render
嘗試使用 React.js 顯示分層樹視圖
我的渲染方法:
render: function(){
var self= this;
return(
<div className="panel panel-flat content-group-lg">
<div className='panel-body'>
<div className="tree">
<ul>
<li>
<a href="#">Categorias</a>
{ self.printTree(this.state.tree_array) }
</li>
</ul>
</div>
</div>
</div>
)
}
和我的 printTree 方法:
printTree: function(level){
console.log(level);
var self = this;
var level_length = level.length;
if(level_length >= 1){
return(
<ul>{
level.map(function(category){
return (
<li key={category.fields.name}>
<a href='#'>{category.fields.name}</a>
</li>
{self.printTree(category.sons_array)}
)
})
}</ul>
)
}
}
printTree 方法接收一個對應於樹的“級別”的數組。 我的目標是“打印”這個級別的每個元素(所以我使用地圖來迭代數組)但也打印當前元素的任何可能的子級別,所以我嘗試遞歸調用該函數,傳遞的“兒子”當前元素作為遞歸調用的新數組參數。
出於某種原因,調用:
{self.printTree(category.sons_array)}
給我:未捕獲的語法錯誤: http : //127.0.0.1/gims-webapp/components/NavBar.js :意外令牌(901:84)
我正在使用 JSX 並且無法弄清楚 JSX 在抱怨什么..
編輯:
我的最終結構應該是這樣的:
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
如果你把你的代碼粘貼到babel repl ,你會看到你的例子中哪里出錯了——它在level.map(...)
里面,因為你應該在map
方法中只返回一個反應節點(但是你有<li >
+ self.printTree
那里)。 你可以把 self.printTree 放在這個 li 里面:
level.map(function(category){
return (
<li key={category.fields.name}>
<a href='#'>{category.fields.name}</a>
{self.printTree(category.sons_array)}
</li>
);
})
JSX 只需要一個Root Node ,所以這段代碼:
return (
<li key={category.fields.name}>
<a href="#">{category.fields.name}</a>
</li>
{self.printTree(category.sons_array)}
);
應改為:
return (
<li key={category.fields.name}>
<a href="#">{category.fields.name}</a>
{self.printTree(category.sons_array)}
</li>
);
或者就像返回:
<li>
...
</li>
<ul>
...
</ul>
其中有幾個根節點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.