react+antd 函数式组件 写一个可以折叠的竖直步骤条

react antd 函数式组件 可折叠的竖直步骤条

---

前言

实现一个有折叠效果的步骤条

效果图

代码如下

import {
    
     DownOutlined, UpOutlined } from '@ant-design/icons';
import {
    
     Steps } from 'antd'
import React,{
    
    useState} from 'react'

export default function Step() {
    
    
  // 默认步骤条全部展开
  const showAll=true

  const description = 'This is a description.';
  const items = [
    {
    
    
      title: '基本设置',
      description:'This is a description1.',
    },
    {
    
    
      title: '条件展示',
      description,
    },
    {
    
    
      title: '跳转页面',
      description,
    },
  ];
  
  const [current, setCurrent] = useState(0);
  // 步骤条每一项都对应着一个自己的状态 所以写在数组里面
  const [selected, setSelected] = useState(
    items.map((_, index) => {
    
    
      // 如果传递相应参数全部展开的话 那就全部打开
      if (showAll) {
    
    
        return showAll;
      }
      // 否则 只默认展开第一个
      return index === 0;
    })
  );

   

  return (
    <Steps current={
    
    current} direction="vertical">
      {
    
    items.map(({
     
     title,description},index)=>{
    
    
        return (<Steps.Step
        title={
    
    
        <span onClick={
    
    ()=>{
    
    
          setCurrent(index)
          selected[index]=!selected[index]
          setSelected([...selected])
        }}>
        {
    
    title}
        {
    
    selected[index]?<DownOutlined style={
    
    {
    
    marginLeft:16}}/> :<UpOutlined style={
    
    {
    
    marginLeft:16}}/>}
        
        </span>
        }
        description={
    
    
          <div style={
    
    {
    
    display:selected[index]?'block':'none'}}>
            {
    
    description}
          </div>
        }
        />
        )
      })}
     
    </Steps>
  )
}