React中绝对定位子组件在父组件加载时对齐边缘的实现策略

// utils/useInterval.js (示例 useInterval 钩子)
import { useEffect, useRef } from 'react';

export function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

import React, { useEffect, useState, useRef } from 'react';
import { useInterval } from './utils/useInterval'; // 假设useInterval在utils目录下

function Thumb(props) {
  const {
    thumb_key,
    snap_tick,       // 拇指应捕捉到的刻度值
    bar_ref,         // 父滑块条的ref
    thumb_ref,       // 拇指自身的ref
    color,
    n_ticks,         // 总刻度数
    thumb_on_mouse_down
  } = props;

  const [pos, set_pos] = useState(0); // 拇指的left定位

  // 使用useInterval定期计算并更新拇指位置
  useInterval(() => {
    // 确保ref.current已定义，避免运行时错误
    if (!thumb_ref.current || !bar_ref.current) {
      return;
    }

    const my_width = thumb_ref.current.getBoundingClientRect().width;
    const bar_rect = bar_ref.current.getBoundingClientRect();
    const bar_start = bar_rect.left; // 父滑块条的起始X坐标
    const bar_width = bar_rect.width; // 父滑块条的宽度

    // 计算拇指中心点应在的X坐标
    // (snap_tick * bar_width) / (n_ticks - 1) 计算刻度在滑块条上的相对位置
    // 减去 Math.floor(my_width / 2) 使拇指中心对齐计算出的位置
    const calculated_pos = bar_start + (snap_tick * bar_width) / (n_ticks - 1) - Math.floor(my_width / 2);

    // 更新状态，使拇指移动到新位置
    set_pos(calculated_pos);
  }, 10); // 每10毫秒执行一次，可根据需求调整

  return (
    <div className="thumb-outer"
      ref={thumb_ref}
      style={{
        height: '20px',
        width: '20px',
        borderRadius: '50%',
        backgroundColor: color,
        position: 'absolute',
        left: pos + 'px', // 应用计算出的left值
        cursor: 'grab',
        dataKey: thumb_key,
      }}
      onMouseDown={e => thumb_on_mouse_down(e, thumb_key)}
    >
    </div>
  );
}

export default Thumb;