反应显示 TreeNode答案

【问题标题】：React displaying TreeNode反应显示 TreeNode
【发布时间】：2020-10-13 12:27:46
【问题描述】：

我想在 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>

谁能告诉我怎么做？

【问题讨论】：

标签： reactjs loops jsx

【解决方案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);
}

【讨论】：

我认为它没有回答我的问题。因为我希望它以不同的方式显示相同的 treeNode 标签
立即尝试。只需要重命名一个 div

【解决方案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>

请注意，此代码实际上并未运行，并且可能存在语法错误 - 将其视为伪代码。

【讨论】：