如何在 react.js 中显示树形数据结构答案

【问题标题】：how to display a tree data structure in react.js如何在 react.js 中显示树形数据结构
【发布时间】：2020-04-14 22:33:06
【问题描述】：

我想使用对函数显示的递归调用来显示一棵树。如果我只提供一个父 ID 作为参数并跳过父母的映射，它会显示父母和所有孩子，但是当我用两个父母调用函数并映射父母 ID 时遇到问题，它不会呈现任何内容.我想知道为什么它不渲染组件？

import React, {
    Fragment
} from 'react';

function App() {
    const parents = [0, 5];
    const element = [{
            id: 0,
            name: "parent1",
            children: [1, 2, 3]
        },
        {
            id: 1,
            name: "child1",
            children: []
        },
        {
            id: 2,
            name: "child2",
            children: []
        },
        {
            id: 3,
            name: "child3",
            children: []
        },
        {
            id: 5,
            name: "parent2",
            children: [4]
        },
        {
            id: 4,
            name: "child1",
            children: []
        }

    ]

    function display(childrenList = []) {
        return childrenList.map((id) => {
            if (id === null || !element[id]) {
                return null;
            }
            const elementProps = element[id]
            return (

                <
                Fragment key = {
                    id
                } >
                 <
                div key = {
                    id
                } > {
                    elementProps.name
                } <
                /div> {
                    display(elementProps.children)
                } <
                /Fragment>


            )
        })
    }
    return ( <
        > {
            parents.map(parent => {
                display([parent])
            })
        } <
        />

    );
}
export default App;

【问题讨论】：

标签： reactjs

【解决方案1】：

我认为你错过了返回显示结果：

return ( <
    > {
        parents.map(parent => {
            return display([parent])
        })
    } <
    />

);

【讨论】：

【解决方案2】：

尝试：

import React, {
  Fragment
} from 'react';

function App() {
  const parents = [0, 5];
  const element = [{
          id: 0,
          name: "parent1",
          children: [1, 2, 3]
      },
      {
          id: 1,
          name: "child1",
          children: []
      },
      {
          id: 2,
          name: "child2",
          children: []
      },
      {
          id: 3,
          name: "child3",
          children: []
      },
      {
          id: 5,
          name: "parent2",
          children: [4]
      },
      {
          id: 4,
          name: "child1",
          children: []
      }

  ]

  function Display(props) {
      const childrenList = props.childs || []
      return childrenList.map((id) => {
          if (id === null || !element[id]) {
              return null;
          }
          const elementProps = element[id]
          return (

              <Fragment key = {
                  id
              } >
               <div key = {
                  id
              } > {
                  elementProps.name
              } </div> 
                  <Display childs={elementProps.children}/>
              </Fragment>


          )
      })
  }

    return ( 
      <div> {
          parents.map(parent => <Display childs={[parent]}/> )
      } </div>)



}
export default App;

在这里运行：https://codesandbox.io/s/heuristic-swanson-6gri0?file=/src/App.js

【讨论】：