React中绝对定位子元素吸附到父元素边缘的动态布局教程

// utils/useInterval.js
import { useEffect, useRef } from 'react';

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]);
}

export default useInterval;

import React, { useEffect, useState, useRef } from 'react';
import useInterval from '../utils/useInterval'; // 导入自定义的useInterval钩子

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定位

  // 声明变量用于存储尺寸信息
  let my_width;
  let bar_start;
  let bar_width;

  // 使用useInterval每10毫秒更新一次位置
  useInterval(() => {
    // 确保ref.current已定义，避免在DOM未渲染时报错
    if (thumb_ref.current && bar_ref.current) {
      // 获取滑块自身的宽度
      my_width = thumb_ref.current.getBoundingClientRect().width;
      // 获取父元素（滑块轨道）的起始X坐标
      bar_start = bar_ref.current.getBoundingClientRect().left;
      // 获取父元素（滑块轨道）的宽度
      bar_width = bar_ref.current.getBoundingClientRect().width;

      // 计算滑块的精确位置
      // (bar_start + (snap_tick * bar_width) / (n_ticks - 1)) 计算出刻度点的绝对X坐标
      // - Math.floor(my_width / 2) 用于将滑块中心对齐到刻度点
      set_pos(
        bar_start + (snap_tick * bar_width) / (n_ticks - 1) - Math.floor(my_width / 2)
      );
    }
  }, 10); // 10毫秒的间隔，可以根据需要调整

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

export default Thumb;

// 示例父组件
import React, { useRef, useState } from 'react';
import Thumb from './Thumb'; // 假设Thumb组件在同一目录下

function SliderBar() {
  const barRef = useRef(null);
  const thumbRef1 = useRef(null); // 为每个滑块创建独立的ref
  const thumbRef2 = useRef(null);

  // 假设有一些状态来管理滑块的刻度位置
  const [thumb1Tick, setThumb1Tick] = useState(0);
  const [thumb2Tick, setThumb2Tick] = useState(4); // 假设总共有5个刻度 (0-4)

  const handleThumbMouseDown = (e, key) => {
    // 处理滑块拖动逻辑
    console.log(`Thumb ${key} clicked`);
  };

  const n_ticks = 5; // 总刻度数量

  return (
    <div
      ref={barRef}
      style={{
        position: 'relative', // 父元素需要relative或absolute定位来容纳绝对定位的子元素
        width: '80%',
        height: '10px',
        backgroundColor: '#ccc',
        margin: '50px auto',
      }}
    >
      <Thumb
        thumb_key="thumb1"
        snap_tick={thumb1Tick}
        bar_ref={barRef}
        thumb_ref={thumbRef1}
        color="blue"
        n_ticks={n_ticks}
        thumb_on_mouse_down={handleThumbMouseDown}
      />
      <Thumb
        thumb_key="thumb2"
        snap_tick={thumb2Tick}
        bar_ref={barRef}
        thumb_ref={thumbRef2}
        color="red"
        n_ticks={n_ticks}
        thumb_on_mouse_down={handleThumbMouseDown}
      />
    </div>
  );
}

export default SliderBar;