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

Question

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

Ant-Design 链接: Ant-design

Answer 1

这可以通过使用步骤 custom icon 来完成属性(property)。这个想法是您可以按如下所示在 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" /> : ""}
/>

您可以查看 working demo .