Javascript React.js在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: 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>
    )
  }
}

render:function（）{
var self=这个；
返回(


{self.printTree（this.state.tree_数组）}


)
}

和我的printTree方法：

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: 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:函数（级别）{
控制台日志（级别）；
var self=这个；
变量level_length=level.length；
如果（级别长度>=1）{
返回(
{
级别映射（功能（类别）{
返回(


{self.printTree（category.sons_数组）}
)         
})
}
)
}
}

printTree方法接收与树的“级别”对应的数组。我的目标是“打印”这个级别的每个元素（因此我使用映射来迭代数组），但也打印当前元素的任何可能的子级别，因此我尝试递归调用该函数，将当前元素的“子”作为递归调用的新数组参数传递

出于某种原因，拨打：

{self.printTree（category.sons_数组）}

给我：未捕获的语法错误：：意外标记（901:84）

我正在使用JSX，不知道JSX在抱怨什么

编辑：

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: 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>
    )
  }
}

我的最终结构应该如下所示：

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

，因此此代码：

return (
    <li key={category.fields.name}>
        <a href="#">{category.fields.name}</a>
    </li>
    {self.printTree(category.sons_array)}
);

返回(


{self.printTree（category.sons_数组）}
);

应改为：

return (
    <li key={category.fields.name}>
        <a href="#">{category.fields.name}</a>
        {self.printTree(category.sons_array)}
    </li>
);

返回(

{self.printTree（category.sons_数组）}

);

或者就像是返回：

<li>
 ...
</li>
<ul>
 ...
</ul>

...


...

这是几个根节点。

如果将代码粘贴到，您将看到示例中的错误所在–它位于

level.map（…）

中，因为您应该在

map

方法中只返回一个react节点（但您有

+

self.printree

）。您可以将self.printree放入此li中：

level.map(function(category){
  return (
    <li key={category.fields.name}>
      <a href='#'>{category.fields.name}</a>
      {self.printTree(category.sons_array)}
    </li>
   );
 })

level.map（功能（类别）{
返回(

{self.printTree（category.sons_数组）}

);
})

请给出完整的错误信息好吗？（而不是“…”@Cohars我发布了相关部分。错误并不是那么直观，但无论如何，我会编辑它。我希望在

意外标记
：）之后出现其他错误，而且，看到不完整的错误令人沮丧。我认为将递归调用放在
中无法满足我对层次结构的需要。我用所需的结构编辑了我的问题。它能适应吗？别介意…你的解决方案是正确的..结构可以按照你说的方式构建。。非常感谢您的帮助…现在如果我们想在每行前面显示序列号，如何在递归方法中以增量方式计算
索引
值？@Pavarine但在您的示例中，您有完全相同的–
li>a+ul
，其中
ul
是
self.printree
您右边的结果！！！别介意…结构完全一样！我接受了@Cohars的回复，因为他比你早几分钟就发布了，但我真的非常感谢你的帮助Alexandr！！