反应 - 树组件

Question

我正在尝试在React中创建一个组件，以递归方式显示数据树中的名称。我对React并不熟悉，并且不确定我在代码中可以做些什么来删除我在控制台中出现的错误。

错误为accept()

以下是我的代码的jsFiddle：https://jsfiddle.net/go79b0dp/ 这是我的示例代码：

Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag

Answer 1

您的TreeNode组件会返回两个兄弟组件：<li>和<ul>。基本上，您试图从render函数中返回两件事，但您无法做到这一点。

通常，推荐的解决方案是将它们包装在另一个元素中。例如：

return (<div>
  <li>{this.props.node.name}</li>
  <ul>{nodes}</ul>
</div>);

但是，对于您尝试创建的树结构，将<ul>置于<li>内可能会更好。那将是：

return (<li>
  {this.props.node.name}
  <ul>{nodes}</ul>
</li>);

这就是嵌套列表通常在HTML中完成的方式。