React Ant Design Tree 组件巧妙构建时序图，轻松展现任务执行流序

2024-01-15 08:21:19

前言

时序图在项目管理和软件开发中扮演着至关重要的角色，它能够清晰地可视化任务的执行顺序和依赖关系。借助时序图，团队可以轻松跟踪项目进度、识别瓶颈并优化工作流程。

在本文中，我们将深入探讨如何利用 React 的 Ant Design 库中的 Tree 组件创建交互式时序图。通过这种方法，我们可以动态加载任务，并在任务执行期间实时更新其状态，从而提供项目执行的全面可视化。

构建时序图

1. 项目结构

首先，我们需要创建一个新的 React 项目并安装 Ant Design 库。

npx create-react-app my-gantt-chart
cd my-gantt-chart
npm install antd

2. Tree 组件集成

接下来，在我们的 React 组件中导入 Tree 组件。

import { Tree } from 'antd';

3. 数据结构

为了构建时序图，我们需要定义一个数据结构来表示任务及其依赖关系。我们使用嵌套对象来表示任务树，其中每个任务包含其名称、状态和子任务。

const data = {
  name: '主任务',
  status: '进行中',
  children: [
    {
      name: '子任务 1',
      status: '未开始',
      children: [],
    },
    {
      name: '子任务 2',
      status: '已完成',
      children: [],
    },
  ],
};

4. 渲染时序图

现在，我们可以使用 Tree 组件渲染时序图。我们使用递归函数来遍历任务树并创建相应的 Tree 节点。

const renderTree = (data) => {
  return (
    <Tree
      showLine
      selectable={false}
      data={data}
      renderItem={(item) => {
        return (
          <Tree.TreeNode
            title={item.title}
            key={item.key}
            icon={<StatusIcon status={item.status} />}
          />
        );
      }}
    />
  );
};

5. 交互

为了使时序图更具交互性，我们可以添加功能来动态加载子任务并更新任务状态。我们可以使用 React 的 useState 和 useEffect 钩子来管理状态和副作用。

const App = () => {
  const [data, setData] = useState(data);
  const [expandedKeys, setExpandedKeys] = useState([]);

  useEffect(() => {
    // 加载子任务
    if (expandedKeys.length > 0) {
      const expandedData = fetchChildTasks(expandedKeys[0]);
      setData({ ...data, children: [...data.children, ...expandedData] });
    }
  }, [expandedKeys]);

  const onExpand = (expandedKeys) => {
    setExpandedKeys(expandedKeys);
  };

  // 更新任务状态
  const updateTaskStatus = (task, newStatus) => {
    const updatedData = updateTaskStatusHelper(data, task, newStatus);
    setData(updatedData);
  };

  return (
    <div>
      {renderTree(data)}
    </div>
  );
};