javascript - 如何在 ReactJS 中使用加载图标更改步数

Question

我正在用 reactjs 开发项目，目前我正在使用Ant-design向导表单。我将分享 ant-design 链接。当用户单击下一步时，我想使用加载图标更改步骤编号。当前步骤编号（例如 1）更改为加载并继续下一步。我是初学者，你能帮帮我吗？

Ant-Design 链接： Ant-design

Answer 1

这可以通过使用步骤自定义图标属性来完成。这个想法是你可以传递如下给出key的：steps

const steps = [
  {
    title: "First",
    content: "First-content",
    key: 1
  },
  {
    title: "Second",
    content: "Second-content",
    key: 2
  },
  {
    title: "Last",
    content: "Last-content",
    key: 3
  }
];

然后您可以使用Icontype loadingin condition 来检查是否current+1 === key如下所示：

<Step
    key={item.title}
    title={item.title}
    icon={item.key !== 1 && item.key === current+1 ? <Icon type="loading" /> : ""}
/>

您可以查看工作演示。