4行代码 react实现 auto进度条自动到右边

最近接了一个项目就是一个step组件类似这样:(下面是semi.design官网的示例) semi.design/zh-CN/navig…

后来发现数据多的时候会有个进度条：

PM有个需求 进入这个页面的时候进度条必须在最右边：

需求实现步骤如下：

1. 引入useRef
2. 创建一个 ref
3. 给进度条的div一个ref绑定
4. 设置滚动条移动到右边

代码实现如下 1.引入useRef

import React, { useRef, useEffect, useState } from 'react';

2.给这个组件添加一个ref:

const containerRef = useRef(null); // 创建一个 ref

3. 给进度条的div一个ref绑定

<div
              ref={containerRef}   // 添加属性 ref
              style={{
                width: 'calc(100vw - 300px)',
                overflow: 'auto',
                minHeight: 100,
                marginTop: 300,
              }}
            >
              <Steps type="basic" current={1} onChange={i => console.log(i)}>
                <Steps.Step style={{ minWidth: '300px' }} title="Finished" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Finished" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Finished" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Finished" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
                <Steps.Step title="Finished" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="In Progress" description="This is a description" />
                <Steps.Step style={{ minWidth: '300px' }} title="Waiting" description="This is a description" />
              </Steps>
            </div>

4.然后再设置进度条的scrollLeft == scrollWidth 搞定啦

useEffect(() => {
    // 确保进度条数据加载完毕
    const container = containerRef.current;
    if (container) {
      container.scrollLeft = container.scrollWidth; // 滚动到最右边
    }
  }, []);