React中复用动画UI组件并传递不同数据与动画参数的方法

一、先修复组件重复显示数据的问题 #

你当前的props传递逻辑混乱：第一个Circlebar传的是单个百分比字符串'65'，第二个传的是整个circleprops对象，组件无法正确识别不同参数，自然会显示相同内容。需要给每个组件传递明确、独立的参数：

修改父组件Education代码： #

const Education = () => {
  return (
    <>
      <div>
        {/* 第一个组件：传递大学GPA对应的百分比及自定义动画参数 */}
        <Circlebar 
          percent="65" 
          animationDuration="2s" 
          targetDashOffset={300} 
        />
        <div>
          <h1>Veltech Engineering college</h1>
          <h2>Bachelor of Engineering - Mechanical Engineering</h2>
          <h3>CGPA - 6.5</h3>
        </div>
        {/* 第二个组件：传递HSC对应的百分比及不同动画参数 */}
        <Circlebar 
          percent="80" 
          animationDuration="1.5s" 
          targetDashOffset={200} 
        />
      </div>
    </>
  )
}

二、动态传递并控制CSS动画参数 #

要实现动画参数的自定义，需将动画相关值通过props传给子组件，再借助CSS变量或内联样式动态绑定：

修改Circlebar组件实现（示例）： #

const Circlebar = ({ percent, animationDuration, targetDashOffset }) => {
  // 若需根据百分比自动计算偏移量，可在此处编写逻辑（比如基于圆形周长计算）
  return (
    <div 
      className="circle-bar-container"
      style={{
        '--animation-duration': animationDuration,
        '--target-dash-offset': targetDashOffset
      }}
    >
      {/* 替换为你的圆形进度条SVG/元素 */}
      <svg className="circle-progress">
        <circle className="progress-bg" cx="50" cy="50" r="40" fill="none" stroke="#eee" strokeWidth="8" />
        <circle 
          className="progress-fill" 
          cx="50" cy="50" r="40" fill="none" stroke="#2ecc71" strokeWidth="8"
          strokeDasharray="251" {/* 圆形周长：2*π*40≈251，按需调整 */}
        />
      </svg>
      <span className="percent-text">{percent}%</span>
    </div>
  )
}

对应CSS修改： #

.circle-progress .progress-fill {
  transform: rotate(-90deg);
  transform-origin: center;
  /* 通过CSS变量动态绑定动画属性 */
  animation: animate var(--animation-duration) ease forwards;
}

@keyframes animate {
  100% {
    stroke-dashoffset: var(--target-dash-offset);
  }
}

.percent-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}

关键要点 #

• props传递要精准：每个复用组件必须传递独立、对应的数据，避免混传字符串与对象
• CSS变量实现动态动画：将动画时长、目标偏移量等参数通过内联样式注入CSS变量，即可在@keyframes中动态引用
• 可选：自动计算偏移量：若不想手动传targetDashOffset，可在Circlebar组件内根据百分比和圆形周长自动计算对应值

内容的提问来源于stack exchange，提问作者Selva s