react-drag-hierarchy-tree，如何让所有父子高度相等

Question

我正在为一个项目使用react-drag-hierarchy-tree，我面临对齐问题。我有一个主要父母，每个孩子都有一个达到一定水平的孩子，但是通过这个，我在父母的第一个和第二个单元格之间有一个间隙。

我怎样才能让它们都一样。

这是我的代码

import 'reactflow/dist/style.css';
import OrgTreeComponent, { useTree } from 'react-drag-hierarchy-tree';

const data = {
    id: 1,
    label: 'Main',
    children: [
      {
        id: 2,
        label: 'Parent',
        children: [
            {
                id: 3,
                label: 'child 1',
                children: [
                    {
                        id: 4,
                        label: 'child 2',

                      },
                      {
                        id: 4,
                        label: 'child 2',
                      },
                      {
                        id: 4,
                        label: 'child 2',
                      },
                      {
                        id: 4,
                        label: 'child 2',
                      },
                ],
              },
              {
                id: 3,
                label: 'child 1',
              },
              {
                id: 3,
                label: 'child 1',
              },
              {
                id: 3,
                label: 'child 1',
              },
        ],
      },
      {
        id: 2,
        label: 'Parent',
      },
      {
        id: 2,
        label: 'Parent',
      },
      {
        id: 2,
        label: 'Parent',
      },
    ],
  };
  

const CampaignStageDetails = () => {

    const { treeRef } = useTree();

    const onClick = () => {
        treeRef.current?.onExpandNodes();
      };
  
    return (
        <div>
            <OrgTreeComponent 
                data={data} 
                ref={treeRef} 
                horizontal
                collapsable={false}
                 />
        </div>
    );
}

export default CampaignStageDetails

在参考图像中，我用蓝色标记，我不想要那个空间。

谢谢你

我正在尝试制作一张包含从一行到另一行的链接的表格

Answer 1

import React from 'react';
import 'reactflow/dist/style.css';
import OrgTreeComponent, { useTree } from 'react-drag-hierarchy-tree';

    const data = {
                   id: 1,
                   label: 'Main',
                   children: [
                   {
                    id: 2,
                    label: 'Parent',
                    children: [
                   {
                    id: 3,
                    label: 'child 1',
                    children: [
                    { id: 4, label: 'child 2' },
                    { id: 5, label: 'child 2' },
                    { id: 6, label: 'child 2' },
                    { id: 7, label: 'child 2' },
                   ],
                },
                   { id: 8, label: 'child 1' },
                   { id: 9, label: 'child 1' },
                   { id: 10, label: 'child 1' },
                ],
              },
                  { id: 11, label: 'Parent', children: [{ id: 12, label: 
                    'child 1' }] },
                  { id: 13, label: 'Parent', children: [{ id: 14, label: 
                    'child 1' }] },
                  { id: 15, label: 'Parent', children: [{ id: 16, label: 
                  'child 1' }] },
                  ],
                 };

                  const CampaignStageDetails = () => {
                  const { treeRef } = useTree();

                 const onClick = () => {
               treeRef.current?.onExpandNodes();
               };

               return (
           <div>
        <OrgTreeComponent data={data} ref={treeRef} horizontal 
         collapsable={false} />
         </div>
         );
       };

      export default CampaignStageDetails;