React 遞歸手寫流程圖展示樹形數據的操作方法

更新時間：2023年11月11日 11:55:14 作者：adindefinite

這篇文章主要介紹了React 遞歸手寫流程圖展示樹形數據的操作方法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

需求

根據樹的數據結構畫出流程圖展示，支持新增前一級、后一級、同級以及刪除功能（便于標記節(jié)點，把節(jié)點數據當作label展示出來了，實際業(yè)務中跟據情況處理）

文件結構

初始數據

[
  {
    "ticketTemplateCode": "TC20230404000001",
    "priority": 1,
    "next": [
      {
        "ticketTemplateCode": "TC20230705000001",
        "priority": 2,
        "next": [
          {
            "ticketTemplateCode": "TC20230707000001",
            "priority": 3
          },
          {
            "ticketTemplateCode": "TC20230404000002",
            "priority": 3
          }
        ]
      }
    ]
  }
]

功能實現 index.tsx

import React, { memo, useState } from 'react'
import uniqueId from 'lodash/uniqueId'
import NodeGroup from './group'
import { handleNodeOperation, NodeItemProps, NodeOperationTypes } from './utils'
import styles from './index.less'
export interface IProps {
  value?: any;
  onChange?: any;
}
/**
 * 樹形流程圖
 */
export default memo<IProps>(props => {
  const { value = [], onChange } = props
  const [activeKey, setActiveKey] = useState('TC20230404000001_1')
  const handleNode = (type = 'front' as NodeOperationTypes, item: NodeItemProps, index: number) => {
    switch (type) {
      case 'click' : {
        setActiveKey(`${item.ticketTemplateCode}_${item.priority}`)
      }; break
      case 'front':
      case 'next':
      case 'same':
      case 'del' : {
        const newList = handleNodeOperation(type, value, `${uniqueId()}`, item, index)
        // 添加前置工單時需要處理選中項
        if (type === 'front') {
          setActiveKey(`${item.ticketTemplateCode}_${item.priority + 1}`)
        }
        onChange?.(newList)
      }; break
    }
  }
  const renderNodes = (list = [] as NodeItemProps[]) => {
    return list.map((item, index) => {
      const key = `${item.ticketTemplateCode}_${item.priority}_${index}`
      const nodeGroupProps = {
        active: `${item.ticketTemplateCode}_${item.priority}` === activeKey,
        options: [],
        handleNode,
        front: item.priority !== 1,
        next: item.next && item.next.length > 0,
        item,
        index,
        sameLevelCount: list.length,
      }
      if (item.next && item.next.length > 0) {
        return (
          <NodeGroup
            key={key}
            {...nodeGroupProps}
            next
          >
            {renderNodes(item.next)}
          </NodeGroup>
        )
      }
      return <NodeGroup key={key} {...nodeGroupProps} />
    })
  }
  return (
    <div style={{ overflowX: 'auto' }}>
      <div className={styles.settingStyle}>{renderNodes(value)}</div>
    </div>
  )
})

group.tsx

import React, { memo, useEffect, useState } from 'react'
import NodeItem from './item'
import styles from './index.less'
import { NodeItemProps } from './utils'
export interface IProps {
  index?: number;
  active?: boolean;
  handleNode?: any;
  sameLevelCount?: number; // 同級工單數量
  front?: boolean; // 是否有前置工單
  next?: boolean; // 是否有后置工單
  children?: any;
  item?: NodeItemProps;
}
/**
 * 流程圖-同層級組
 */
export default memo<IProps>(props => {
  const { active, front = false, next = false, handleNode, children, item, index, sameLevelCount = 1 } = props
  const [groupHeight, setGroupHeight] = useState(0)
  useEffect(() => {
    const groupDom = document.getElementById(`group_${item?.ticketTemplateCode}`)
    setGroupHeight(groupDom?.clientHeight || 0)
  }, [children])
  // 處理連接線展示
  const handleConcatLine = () => {
    const line = (showLine = true) => <div className={styles.arrowVerticalLineStyle} style={{ height: groupHeight / 2, backgroundColor: showLine ? 'rgba(0, 0, 0, 0.25)' : 'white' }} />
    return (
      <span>{line(index !== 0)}{line(index + 1 !== sameLevelCount)}</span>
    )
  }
  return (
    <div className={styles.groupDivStyle} id={`group_${item?.ticketTemplateCode}`}>
      {sameLevelCount < 2 ? null : handleConcatLine()}
      <NodeItem
        active={active}
        options={[]}
        handleNode={handleNode}
        front={front}
        next={next}
        item={item}
        sameLevelCount={sameLevelCount}
        index={index}
      />
      {children?.length ? <div>{children}</div> : null}
    </div>
  )
})

item.tsx

/* eslint-disable curly */
import { Select, Space, Tooltip } from 'antd'
import React, { memo } from 'react'
import styles from './index.less'
import { PlusCircleOutlined, CaretRightOutlined, DeleteOutlined } from '@ant-design/icons'
import { ProjectColor } from 'styles/projectStyle'
import { nodeOperationTip, NodeItemProps } from './utils'
export interface IProps {
  index?: number;
  active?: boolean; // 選中激活
  options: any[]; // 單項選項數據 放在select中
  handleNode?: any;
  sameLevelCount?: number; // 同級工單數量
  front?: boolean; // 是否有前置工單
  next?: boolean; // 是否有后置工單
  same?: boolean; // 是否有同級工單
  item?: NodeItemProps;
}
/**
 * 流程圖-單項
 */
export default memo<IProps>(props => {
  const {
    index,
    active,
    options = [],
    handleNode,
    front = false,
    next = false,
    item,
  } = props
  // 添加 or 刪除工單圖標
  const OperationIcon = ({ type }) => {
    if (!active) return null
    const dom = () => {
      if (type === 'del') return <DeleteOutlined style={{ marginBottom: 9 }} onClick={() => handleNode(type, item, index)} />
      if (type === 'same')
        return <PlusCircleOutlined style={{ color: ProjectColor.colorPrimary, marginTop: 9 }} onClick={() => handleNode(type, item, index)} />
      const style = () => {
        if (type === 'front') return { left: -25, top: 'calc(50% - 7px)' }
        if (type === 'next') return { right: -25, top: 'calc(50% - 7px)' }
      }
      return (
        <PlusCircleOutlined
          className={styles.itemAddIconStyle}
          style={{ ...style(), color: ProjectColor.colorPrimary }}
          onClick={() => handleNode(type, item, index)}
        />
      )
    }
    return <Tooltip title={nodeOperationTip[type]}>{dom()}</Tooltip>
  }
  // 箭頭
  const ArrowLine = ({ width = 50, show = false, arrow = true }) =>
    show ? (
      <div className={styles.arrowDivStyle} style={front && arrow ? { marginRight: -4 } : {}}>
        <div className={styles.arrowLineStyle} style={{ width, marginRight: front && arrow ? -4 : 0 }} />
        {!arrow ? null : (
          <CaretRightOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />
        )}
      </div>
    ) : null
  return (
    <div className={styles.itemStyle}>
      <Space direction="vertical" align="center">
        <div className={styles.itemMainStyle}>
          <ArrowLine show={front} />
          <div className={styles.itemSelectDivStyle}>
            <OperationIcon type="del" />
            // 可以不需要展示 寫的時候便于處理節(jié)點操作
            {item?.ticketTemplateCode}
            <Select
              defaultValue="lucy"
              bordered={false}
              style={{
                minWidth: 120,
                border: `1px solid ${active ? ProjectColor.colorPrimary : '#D9D9D9'}`,
                borderRadius: 4,
              }}
              onClick={() => handleNode('click', item, index)}
              // onChange={handleChange}
              options={[ // 應該為props中的options
                { value: 'jack', label: 'Jack' },
                { value: 'lucy', label: 'Lucy' },
                { value: 'Yiminghe', label: 'yiminghe' },
                { value: 'disabled', label: 'Disabled', disabled: true },
              ]}
            />
            <OperationIcon type="same" />
            <OperationIcon type="front" />
            <OperationIcon type="next" />
          </div>
          <ArrowLine show={next} arrow={false} />
        </div>
      </Space>
    </div>
  )
})

utils.ts

/* eslint-disable curly */
export interface NodeItemProps {
  ticketTemplateCode: string;
  priority: number;
  next?: NodeItemProps[];
}
export type NodeOperationTypes = 'front' | 'next' | 'del' | 'same' | 'click'
/**
 * 添加前置/后置/同級/刪除工單
 * @param type 操作類型
 * @param list 工單樹
 * @param addCode 被添加的工單節(jié)點模版Code
 * @param item 操作節(jié)點
 */
export const handleNodeOperation = (type: NodeOperationTypes, list = [] as NodeItemProps[], addCode: NodeItemProps['ticketTemplateCode'], item: NodeItemProps, index: number) => {
  if (item.priority === 1 && type === 'front') return handleNodePriority([{ ticketTemplateCode: addCode, priority: item.priority, next: list }])
  if (item.priority === 1 && type === 'same') {
    return [
      ...(list || []).slice(0, index + 1),
      { ticketTemplateCode: addCode, priority: item.priority },
      ...(list || []).slice(index + 1, list?.length),
    ]
  }
  let flag = false
  const findNode = (child = [] as NodeItemProps[]) => {
    return child.map(k => {
      if (flag) return k
      if (type === 'front' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        return { ...k, next: [{ ticketTemplateCode: addCode, priority: item.priority, next: k.next }]}
      }
      if (type === 'next' && k.ticketTemplateCode === item.ticketTemplateCode) {
        flag = true
        return { ...k, next: [...(k.next || []), { ticketTemplateCode: addCode, priority: item.priority }]}
      }
      if (type === 'same' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        return { ...k, next: [
          ...(k.next || []).slice(0, index + 1),
          { ticketTemplateCode: addCode, priority: item.priority },
          ...(k.next || []).slice(index + 1, k.next?.length),
        ]}
      }
      if (type === 'del' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        console.log(index, (k.next || []).slice(0, index), (k.next || []).slice(index + 1, k.next?.length), 223)
        return { ...k, next: [
          ...(k.next || []).slice(0, index),
          ...(k.next || []).slice(index + 1, k.next?.length),
        ]}
      }
      if (k.next && k.next.length > 0) {
        return { ...k, next: findNode(k.next) }
      }
      return k
    })
  }
  return handleNodePriority(findNode(list))
}
// 處理層級關系
export const handleNodePriority = (list = [] as NodeItemProps[], priority = 1) => { // priority 層級
  return list.map((k: NodeItemProps) => ({ ...k, priority, next: handleNodePriority(k.next, priority + 1) }))
}
// 得到最大層級 即工單樹的深度
export const getDepth = (list = [] as NodeItemProps[], priority = 1) => {
  const depth = list.map(i => {
    if (i.next && i.next.length > 0) {
      return getDepth(i.next, priority + 1)
    }
    return priority
  })
  return list.length > 0 ? Math.max(...depth) : 0
}
export const nodeOperationTip = {
  front: '增加前置工單',
  next: '增加后置工單',
  same: '增加同級工單',
  del: '刪除工單',
}

index.less

.settingStyle {
  margin-left: 50px;
}
.groupDivStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.itemStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 94px;
}
.itemMainStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.arrowLineStyle {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.25);
  margin-right: -4px;
}
.arrowDivStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.itemAddIconStyle {
  position: absolute;
}
.itemSelectDivStyle {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.arrowVerticalLineStyle {
  width: 1px;
  background-color: rgba(0, 0, 0, 0.25);
}

叭叭

難點一個主要在前期數據結構的梳理以及具體實現上，用遞歸將每個節(jié)點以及子節(jié)點的數據作為一個Group組，如下圖。節(jié)點組包括當前節(jié)點+子節(jié)點，同層級為不同組

第二個比較麻煩的是由于純寫流程圖，葉子節(jié)點間的箭頭指向連接線需要處理?？梢詫⒁粋€節(jié)點拆分為 前一個節(jié)點的尾巴+當前節(jié)點含有箭頭的連接線+平級其他節(jié)點含有箭頭（若存在同級節(jié)點不含箭頭）的連接線+豎向連接線（若存在同級節(jié)點），計算邏輯大概為94 * （下一級節(jié)點數量 - 1）

后來發(fā)現在實際添加節(jié)點的過程中，若葉子節(jié)點過多，會出現豎向連接線缺失（不夠長）的情況，因為長度計算依賴下一級節(jié)點數量，無法通過后面的子節(jié)點的子節(jié)點等等數量做計算算出長度（也通過這種方式實現過，計算當前節(jié)點的最多層子節(jié)點數量……很奇怪的方式）
反思了一下，豎向連接線應該根據當前節(jié)點的Group組高度計算得出，連接線分組也應該重新調整，豎向連接線從單個節(jié)點的末端調整到group的開頭，第一個節(jié)點只保留下半部分（為了占位，上半部分背景色調整為白色），最后一個節(jié)點只保留上半部分，中間的節(jié)點保留整個高度的連接線