React.js 在渲染中调用递归函数

Question

正在尝试使用 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 方法接收一个对应于树的 "level" 的数组。我的目标是 'print' 这个级别的每个元素（所以我使用 map 遍历数组）但也打印当前元素的任何可能的子级别，所以我尝试递归调用函数，传递 [=当前元素的 44=] 作为递归调用的新数组参数。

出于某种原因，呼叫：

{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>

Answer 1

JSX requires expects only one 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>

其中有几个根节点。

Answer 2

如果您将代码粘贴到 babel repl，您将看到示例中的错误所在 – 它在 level.map(...) 内，因为您应该 return 仅 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>
   );
 })

React.js 在渲染中调用递归函数

React.js call recursive function in render

javascript

recursion

jsx

reactjs