如何在ReactJS中使用加载图标更改步骤编号

Question

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

蚂蚁设计链接： 蚂蚁设计

Answer 1

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

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

然后您可以使用loading类型的Icon作为条件来检查current+1 === key ，如下所示：

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

您可以查看正在运行的演示 。