Как отобразить всех детей с помощью Ant Design Tree Node - PullRequest
0 голосов
/ 23 марта 2020

У меня есть массив, который выглядит примерно так:

const hierarchy = [
  {
    hierarchyId: 1,
    hierarchyName: 'John'
    children: [
      {
        hierarchyId: 2,
        hierarchyName: 'Mary',
        children: []
      },
      {
        hierarchyId: 3,
        hierarchyName: 'Jane',
        children: [
          {
            hierarchyId: 4,
            hierarchyName: 'Joan',
            children: []
          },
          {
            hierarchyId: 5,
            hierarchyName: 'Jim',
            children: [
              {
                hierarchyId: 6,
                hierarchyName: 'Mike',
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
]

И я хочу представить это в Дереве Дизайна Муравьев. Но я хочу иметь возможность добавлять кнопки и, возможно, еще один столбец в TreeNode в дереве.

import React from 'react'
import { Tree } from 'antd'
const { TreeNode } = Tree

const TreeComponent = ({ hierarchy }) => {
  return (
    <Tree>
      {hierarchy.map(res => {
        return (
          <TreeNode
            key={res.hierarchyId}
            title={(
              <div>
                <span>{res.hierarchyName}</span>
                <span>Another Column</span>
                <button>Click here</button>
              </div>
          )}>
            {res.children.map(r => {
              <TreeNode
                key={res.hierarchyId}
                title={(
                <div>
                  <span>{res.hierarchyName}</span>
                  <span>Another Column</span>
                  <button>Click here</button>
               </div>
              )} />
            })}
          </TreeNode>
        )
      }}
    </Tree>
  )
}

export default TreeComponent

Теперь, очевидно, что вышеприведенное будет показывать только 2 уровня в глубине дерева, мне интересно, были ли скажем, 10 уровней (или любое количество на самом деле), как бы я динамически отображал каждый уровень в дереве, не зная, как глубоко он идет, и все еще был бы в состоянии добавить кнопку и другой столбец в TreeNode?

Любая помощь очень оценил, спасибо!

1 Ответ

0 голосов
/ 23 марта 2020

В итоге я воспользовался этим простым решением:

import React from 'react'
import { Tree } from 'antd'
const { TreeNode } = Tree

const TreeComponent = ({ hierarchy }) => {
  const renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.key} {...item} />
    })

  return (
    <Tree>
      {renderTreeNodes(hierarchy)}
    </Tree>
  )
}

export default TreeComponent

Что я нашел здесь: Дерево разработки муравьев defaultExpandAll не работает с нажатием кнопки для реакции

...