react 任务进度条（完成一个任务进度条向前进，且每隔一段进度条上方显示当前百分比对应的任务）

你可以使用 React 组件来实现一个任务进度条。以下是一个简单的实现示例：

import React, { useState } from "react";

function TaskProgressBar({ tasks }) {
  const [currentTaskIndex, setCurrentTaskIndex] = useState(0);
  const currentTask = tasks[currentTaskIndex];

  const progress = (currentTaskIndex / tasks.length) * 100;

  const handleTaskCompleted = () => {
    setCurrentTaskIndex(currentTaskIndex + 1);
  };

  return (
    <div>
      <div
        style={{
          width: `${progress}%`,
          height: "20px",
          backgroundColor: "green",
        }}
      />
      <div style={{ marginTop: "10px" }}>{`${progress}% - ${
        currentTask.name
      }`}</div>
      <button onClick={handleTaskCompleted}>Complete Task</button>
    </div>
  );
}

export default function App() {
  const tasks = [
    {
      name: "Task 1",
    },
    {
      name: "Task 2",
    },
    {
      name: "Task 3",
    },
  ];

  return <TaskProgressBar tasks={tasks} />;
}

在上面的代码中，我们定义了一个 `TaskProgressBar` 组件，它接受一个任务列表作为 props。我们使用 `useState` hook 来存储当前任务的索引。我们计算出当前进度的百分比，并将其用作进度条的宽度。我们还在顶部显示当前任务的名称和进度百分比。

当用户点击“Complete Task”按钮时，我们将当前任务的索引递增，进度条将向前移动，并显示下一个任务。