如何复用存在细微差异的React滑块组件？

当然可以实现，核心思路是把滑块的通用逻辑（比如值控制、滑动交互、基础样式）抽成基础组件，再通过props传递差异化配置或插入自定义内容，来实现带百分比显示的变体版本。

1. 封装基础滑块组件 #

先写一个通用的基础滑块，把所有滑块都会用到的逻辑封装进去：

import { useState } from 'react';

// 基础滑块组件：封装通用逻辑
const BaseSlider = ({ min = 0, max = 100, initialValue = 0, onChange, children }) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    const newValue = Number(e.target.value);
    setValue(newValue);
    onChange?.(newValue);
  };

  return (
    <div className="base-slider-container">
      <input
        type="range"
        min={min}
        max={max}
        value={value}
        onChange={handleChange}
        className="slider-track"
      />
      {/* 插槽：用于插入差异化内容（比如百分比显示） */}
      {children}
    </div>
  );
};

2. 实现带百分比的变体组件 #

基于基础组件，通过插槽插入13%的显示字段，实现差异化版本：

// 带百分比显示的滑块组件：复用BaseSlider，添加差异化内容
const SliderWithPercentage = ({ percentage = '13%', ...props }) => {
  return (
    <BaseSlider {...props}>
      <div className="percentage-label">
        {percentage}
      </div>
    </BaseSlider>
  );
};

3. 调用示例 #

在业务代码中直接使用两个版本的滑块：

// 调用示例
const App = () => {
  const handleSliderChange = (value) => {
    console.log('滑块当前值：', value);
  };

  return (
    <div className="app-container">
      {/* 普通滑块 */}
      <BaseSlider
        initialValue={20}
        onChange={handleSliderChange}
      />

      {/* 带13%字段的滑块 */}
      <SliderWithPercentage
        initialValue={13}
        percentage="13%"
        onChange={handleSliderChange}
      />
    </div>
  );
};

4. 基础样式参考 #

给滑块添加简单样式，让布局更合理：

.base-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.slider-track {
  width: 200px;
}

.percentage-label {
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
}

复用的核心要点 #

• 抽离通用逻辑：BaseSlider封装了滑块的状态管理、滑动事件、基础结构，避免重复编写相同代码
• props传递配置：通过props传递min、max、initialValue等通用配置，同时让变体组件可以自定义百分比文本
• 插槽模式：利用children属性插入差异化内容，让基础组件更灵活，可扩展出多种变体（比如带数值显示、带图标等）

内容的提问来源于stack exchange，提问作者Evgeniy Sukhovarov