简化React组件：实现产品可选费用的自动化处理

修正后的基础配置数组 #

先把你提供的重复配置修正为每个选项唯一的版本：

const initialExtras = [
  { name: "Extra1", price: 20, active: false },
  { name: "Extra2", price: 40, active: false },
  // 后续加新选项直接在这里追加即可
];

优化后的Extras.jsx #

import React, { useState } from "react";
import styles from "../styles/extras.module.css";

// 抽离可选选项的配置，后续扩展只需修改这个数组
const initialExtras = [
  { name: "Extra1", price: 20, active: false },
  { name: "Extra2", price: 40, active: false },
];

function Extras() {
  // 用单个state管理所有可选选项，替代零散的多个state
  const [extras, setExtras] = useState(initialExtras);

  // 通用切换选中状态的函数，不用为每个选项写单独的处理逻辑
  const toggleExtra = (index) => {
    setExtras(prevExtras => {
      const updatedList = [...prevExtras];
      updatedList[index].active = !updatedList[index].active;
      return updatedList;
    });
  };

  // 用reduce自动计算总费用，替代手动累加的冗余代码
  const extrasPrice = extras.reduce((total, item) => {
    return total + (item.active ? item.price : 0);
  }, 0);

  return (
    <div className={styles.extrasWrapper}>
      {/* 遍历数组动态生成所有选项，不用重复写p标签 */}
      {extras.map((item, index) => (
        <p
          key={index}
          className={item.active ? styles.activeExtras : styles.extras}
          onClick={() => toggleExtra(index)}
        >
          {item.name} {item.active ? item.price : 0}
        </p>
      ))}
    </div>
  );
}

export default Extras;

核心优化点 #

• 消除重复状态：用单个数组state替代extra1、extra2这类零散状态，新增选项无需额外定义state
• 通用逻辑复用：toggleExtra函数通过索引统一处理选中切换，不用为每个选项写单独的点击事件
• 动态渲染元素：通过map遍历配置数组生成所有选项，新增选项只需在initialExtras里加一项，无需修改渲染代码
• 自动计算总价：用reduce方法遍历数组累加选中项价格，替代手动相加的冗余逻辑
• 样式兼容不变：原有的CSS类名完全适配，不需要调整Extras.module.css

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