反应显示TreeNode

Question

我想像下面这样在React中生成TreeNode。

<TreeNode>
    <TreeNode>
        <TreeNode>
        </TreeNode>
    </TreeNode>
</TreeNode>

下面是我尝试过的代码

const numberVal = [1,2,3];
function renderPage(){
return(numberVal.map((n, i) => (
    <TreeNode></TreeNode>
  )));
}

它显示如下：

<TreeNode></TreeNode>
<TreeNode></TreeNode>
<TreeNode></TreeNode>

有人能让我知道怎么做吗？

Answer 1

我会使用递归：

const numberVal = [1,2,3];
function renderPage(){

  const processData = array => {

    if(array.length)  {
      const [first, ...rest] = array || [];
      return (
        <TreeNode>
          {processData(rest)}
        </TreeNode>
      )
    }
    return null;
  }

  return processData(numberVal);
}

Answer 2

试试这样的东西。在构建节点时，包括子结构，如果存在，则让其子结构包含在节点内部。

const makeNodes([nodeId, ...children]) {
  return (
    <TreeNode id={nodeId}>
    { children ? makeNodes(children) : null }
    </TreeNode>
  );
}

render() {
  const a = [1,2,3];
  return makeNodes(a);
}

这样你就可以制造出更复杂的结构，像这样：

render() {
  const a = [ [1,2,3], [4], [5,6] ];
  return (
    <div>
    { a.map(nodes => makeNodes(nodes)) }
    </div>
  );
}

它应该产生

  <TreeNode id=1>
    <TreeNode id=2>
      <TreeNode id=3>
      </TreeNode>
    </TreeNode>
  </TreeNode>
  <TreeNode id=4>
  </TreeNode>
  <TreeNode id=5>
    <TreeNode id=6>
    </TreeNode>
  </TreeNode>

请注意，这段代码实际上没有运行，并且可能有语法错误--请考虑它是伪代码。