【React】步骤条实现

最新推荐文章于 2025-06-06 09:02:46 发布

原创最新推荐文章于 2025-06-06 09:02:46 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

2 篇文章

订阅专栏

最近在学习react。正好项目里碰到了这个需求就记录下

首先写react的朋友们一定对Ant Design不陌生了.这里引用的就是下面的这个组件
在这里插入图片描述

那么中间的面板我们希望根据步骤的进展然后显示不同的内容。
那么我们就可以通过id来进行传。然后跳到不同的组件页面

大概的代码如下：


const steps = [
  {
    id:1,
    title: '第一步',
    content: 'First-content',

  },
  {
    id:2,
    title: '第二步',
    content: 'Second-content',
  },
  {
    id:3,
    title: '第三步',
    content: 'Last-content',
  },
];


function getStepContent(id) {
  // eslint-disable-next-line default-case
  switch (id) {
    case 0:
      return <Step1 />;
    case 1:
      return <Step2 />;
    case 2:
      return  <Step3/>;
  }
}


  render() {
    const { current } = this.state;
    return (
        <div className="steps-content">
          {getStepContent(current)}
        </div>
        )
    }