React中如何通过Toggle开关切换调用thirtyDays或year函数

核心实现思路 #

• 用组件状态记录当前选中的交易统计时间维度，作为开关UI的显示依据
• 建立状态值和已有业务函数的映射关系，消除冗余的条件判断分支
• 绑定开关的变更/点击事件，触发时同步更新状态、调用匹配的业务函数完成数据切换

具体落地步骤 #

1. 初始化状态与业务映射关系 #

引入已编写的两个业务函数，用状态存储当前选中的维度，提前做好维度值和对应函数的绑定：

import { useState } from 'react';
// 引入项目内已实现的两个业务函数
import { thirtyDays, year } from './业务函数所在文件路径';

function 交易统计页面() {
  // 初始化默认维度为近30天，可根据实际需求调整初始值
  const [currentDimension, setCurrentDimension] = useState('30d');

  // 维度值与业务函数的映射表
  const dimensionFuncMap = {
    '30d': thirtyDays,
    '1y': year
  };

2. 编写事件处理逻辑 #

针对开关的触发事件编写统一处理函数，根据开关状态确定目标维度，完成状态更新和业务函数调用：

// 开关状态变更的统一处理逻辑
  const onToggleTrigger = (switchChecked) => {
    // 根据开关的选中状态，确定要切换到的时间维度
    const targetDimension = switchChecked ? '1y' : '30d';
    // 更新页面选中维度的状态，同步驱动开关UI的显示
    setCurrentDimension(targetDimension);
    // 从映射表中取出对应业务函数并执行
    const targetFunction = dimensionFuncMap[targetDimension];
    targetFunction();
  };

3. 关联已搭建的Toggle组件 #

把之前完成的ToggleButton组件和上述逻辑做绑定，传递对应的UI状态和事件回调：

return (
    <div className="trade-stat-container">
      {/* 已完成基础样式的ToggleButton组件 */}
      <ToggleButton
        // 根据当前状态控制开关的选中UI显示
        isToggled={currentDimension === '1y'}
        // 绑定开关的触发事件
        onChange={onToggleTrigger}
        toggleText="近30天 / 近一年"
      />
      {/* 原有交易统计页面内容 */}
    </div>
  );
}

优化注意事项 #

• 不要在组件渲染阶段直接调用thirtyDays或year业务函数，避免渲染周期内触发重复的接口请求、无效的重复计算
• 如果业务函数的执行需要依赖最新的状态值（比如需要把当前选中的维度作为请求参数传递），可以用useEffect做状态联动，替代事件回调里的直接函数调用，保证拿到的是更新后的最新状态：

  import { useEffect } from 'react';
  // 监听选中维度的变化，自动执行对应业务函数
  useEffect(() => {
    const targetFunction = dimensionFuncMap[currentDimension];
    targetFunction();
  }, [currentDimension]);
  

• 如果现有Toggle组件返回的事件参数不是布尔选中态（比如直接返回维度字符串值），只需要在事件处理函数里把参数和映射表的key做匹配即可，不需要额外做状态转换

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