React组件复用出现堆叠重叠问题求助

问题现象 #

多次渲染自定义Range组件时，组件在同一位置堆叠，滑块不可见，标题相互叠加。

原因分析 #

1. Range组件的容器.range未设置合理布局规则，导致多个组件挤在同一位置；
2. 父容器Div1未配置布局让子元素垂直排列，也未避开顶部绝对定位的Heading元素，造成内容重叠；
3. ReactSlider的自定义样式缺失或定位错误，导致滑块不可见。

解决方案 #

1. 修复Range组件的CSS样式 #

修改Range.css，给组件容器设置块级布局和间距，确保内部元素正常排列：

.range {
  /* 让每个Range组件占一行，增加上下间距 */
  margin: 24px 0;
  /* 内部元素垂直排列，设置间距 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 确保ReactSlider基础样式正确 */
.customSlider {
  height: 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.customSlider-track {
  background-color: #2196f3;
  border-radius: 5px;
}

.customSlider-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #2196f3;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.range-value {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.range h4 {
  margin: 0;
  font-size: 16px;
  color: #30302e;
}

2. 调整父容器布局 #

修改RangeComp中的Div1样式，让子元素垂直排列，并避开顶部标题：

const Div1 = styled.div`
  /* 避开顶部绝对定位的Heading */
  margin-top: 120px;
  padding: 0 8%;
  /* 让Range组件垂直排列，设置间距 */
  display: flex;
  flex-direction: column;
  gap: 20px;
`;

3. 优化Range组件结构（可选） #

调整内部元素顺序，让布局更符合视觉逻辑：

function Range(props) {
  const [currentValue, setCurrentValue] = useState(0);
  return (
    <div className="range">
      <h4>{props.title}</h4> {/* 标题放在滑块上方 */}
      <ReactSlider
        className="customSlider"
        trackClassName="customSlider-track"
        thumbClassName="customSlider-thumb"
        min={0}
        max={10}
        value={currentValue}
        onChange={(value) => setCurrentValue(value)}
      />
      <h1 className="range-value">{currentValue}/10</h1>
    </div>
  );
}

修改后的完整代码示例 #

RangeComp.jsx #

import React from "react";
import styled from "styled-components";
import ellipse from "../img/ellipse.png";
import Range from "./Range";

function RangeComp() {
  const titlesArr = [
    "Cybersecurity",
    "Developer",
    "DevOps",
    "Designer",
    "Project Manager",
    "Product Manager",
    "Marketer",
    "Writer",
  ];
  return (
    <Container>
      <Circle />
      <Heading>Score your level of interest in these job titles:</Heading>
      <Divs>
        <Div1>
          {titlesArr.map((title, index) => (
            <Range key={index} title={title} /> {/* 用map循环渲染更简洁 */}
          ))}
        </Div1>
        <Div2></Div2>
      </Divs>
    </Container>
  );
}

export default RangeComp;

const Container = styled.div`
  position: absolute;
  width: 980px;
  height: 583px;
  left: 650px;
  top: 220px;
  box-shadow: 0px 4px 29px #f0f3ff;
  border-radius: 35px;
  :hover {
    border: 1px solid black;
  }
`;
const Circle = styled.div`
  position: absolute;
  background-image: url(${ellipse});
  width: 30px;
  height: 30px;
  right: 1.8%;
  top: 2%;
  background-repeat: no-repeat;
  background-size: cover;
`;
const Heading = styled.div`
  position: absolute;
  width: 400px;
  height: 31px;
  font-family: "HelveticaNeueCyr";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 155.02%;
  color: #30302e;
  left: 8%;
  top: 10%;
`;
const Divs = styled.div``;
const Div1 = styled.div`
  margin-top: 120px;
  padding: 0 8%;
  display: flex;
  flex-direction: column;
  gap: 20px;
`;
const Div2 = styled.div``;

Range.jsx #

import React, { useState } from "react";
import "./Range.css";
import ReactSlider from "react-slider";

function Range(props) {
  const [currentValue, setCurrentValue] = useState(0);
  return (
    <div className="range">
      <h4>{props.title}</h4>
      <ReactSlider
        className="customSlider"
        trackClassName="customSlider-track"
        thumbClassName="customSlider-thumb"
        min={0}
        max={10}
        value={currentValue}
        onChange={(value) => setCurrentValue(value)}
      />
      <h1 className="range-value">{currentValue}/10</h1>
    </div>
  );
}

export default Range;

内容的提问来源于stack exchange，提问作者Tomiwa Kukoyi