ReactJS应用中复用评分SVG组件的技术方案咨询

1. 把目标SVG抽成独立可复用组件 #

先把注释{/* ------- SQD0 --------- */}下的SVG代码单独拎出来，做成一个通用组件，方便后续传入状态和交互逻辑：

// 新建 EmojiSVG.jsx 文件
import React from 'react';

const EmojiSVG = ({ className = 'emoji', isActive, onClick }) => {
  return (
    <svg
      className={`${className} ${isActive ? 'active' : ''}`}
      onClick={onClick}
      // 这里复制原SVG的width、height、viewBox等属性
    >
      {/* 原SVG内部的所有元素（path、g、circle等）直接移过来 */}
    </svg>
  );
};

export default EmojiSVG;

这里通过isActive控制激活状态的样式，onClick接收外部传入的点击逻辑，保证每个SQD模块能独立处理交互。

2. 封装SQD基础组件 #

把单个SQD模块（包括评分交互）封装成组件，内部引入刚才的EmojiSVG：

// 新建 SQDModule.jsx 文件
import React, { useState } from 'react';
import EmojiSVG from './EmojiSVG';

const SQDModule = ({ sqdId }) => {
  // 每个SQD独立维护自己的评分状态
  const [isRated, setIsRated] = useState(false);

  const handleRating = () => {
    setIsRated(!isRated);
    // 这里复制你原来SQD0的评分逻辑，比如提交数据、更新全局状态等
    console.log(`SQD ${sqdId} 评分状态切换: ${!isRated}`);
  };

  return (
    <div className="sqd-wrapper">
      {/* 这里放SQD模块的其他内容，比如标题、描述 */}
      <EmojiSVG isActive={isRated} onClick={handleRating} />
    </div>
  );
};

export default SQDModule;

3. 批量渲染10个SQD组件 #

在父组件里循环生成10个SQD模块，每个传入唯一标识：

// 父组件文件
import React from 'react';
import SQDModule from './SQDModule';

const SQDContainer = () => {
  const totalSQD = 10;

  return (
    <div className="sqd-container">
      {Array.from({ length: totalSQD }, (_, index) => (
        <SQDModule key={index} sqdId={`SQD${index}`} />
      ))}
    </div>
  );
};

export default SQDContainer;

额外优化点（可选） #

如果不同SQD需要不同表情的SVG，可以给EmojiSVG加个emojiType属性，根据类型切换路径：

// EmojiSVG.jsx 扩展
const EmojiSVG = ({ className = 'emoji', isActive, onClick, emojiType = 'default' }) => {
  const getEmojiPath = () => {
    switch(emojiType) {
      case 'happy':
        return 'M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm-1.25-12.5h2.5v2.5h-2.5v-2.5zm0 5h2.5v2.5h-2.5v-2.5zM10 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z';
      case 'sad':
        return 'M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm-1.25-7.5h2.5v5h-2.5v-5zm0-2.5h2.5v2.5h-2.5v-2.5zM10 5c-1.38 0-2.5 1.12-2.5 2.5S8.62 10 10 10s2.5-1.12 2.5-2.5S11.38 5 10 5z';
      default:
        return '原SQD0的SVG路径';
    }
  };

  return (
    <svg className={`${className} ${isActive ? 'active' : ''}`} onClick={onClick}>
      <path d={getEmojiPath()} />
    </svg>
  );
};

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