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

问题描述：

尝试使用React.js显示树状视图

Trying to display a hierarquical tree view with 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方法接收一个与树的级别"相对应的数组.我的目标是打印"此级别的每个元素(因此我使用映射来迭代数组)，但也打印当前元素的任何可能的子级别，因此我尝试递归地调用该函数，并传递当前元素作为递归调用的新数组参数.

The printTree method receives an array that corresponds to a "level" of the tree. My goal is to 'print' each element of this level ( so I use the map to iterate over the array ) but also print any possible sublevels of the current element, so I tried to call the function recursively, passing the 'sons' of the current element as the new array parameter for the recursive call.

由于某种原因，请致电:

For some reason, calling:

{self.printTree(category.sons_array)}

给我:未捕获的语法错误: http://127.0.0.1/gims -webapp/components/NavBar.js :意外令牌(901:84)

gives me: Uncaught SyntaxError: http://127.0.0.1/gims-webapp/components/NavBar.js: Unexpected token (901:84)

我正在使用JSX，无法弄清JSX在抱怨什么.

I'm using JSX and can't figure out what JSX is complaining about..

我的最终结构应如下所示:

My final structure should look like this:

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

答

JSX要求仅一个根节点，因此此代码:

JSX requires expects only one Root Node, so this code:

  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>

有几个根节点.

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

相关推荐