Question

我想使用对函数显示的递归调用来显示树。如果我仅提供一个父代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;

Answer 1

尝试：

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

Answer 2

我认为您错过了返回显示结果的时间：

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

);

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

2 个答案: