React中基于react-wheel-of-prizes实现每5次随机中奖的转盘求助

核心思路 #

要满足你的需求，需要通过状态管理跟踪抽奖周期、当前周期内的抽奖次数，以及相邻周期的中奖位置，动态控制winningSegment的值：

• 以5次抽奖为一个周期，每个周期内随机指定1个中奖次数（范围1-5）
• 相邻周期的中奖次数不能重复
• 根据当前抽奖次数是否命中周期内的中奖位置，返回对应的中奖/非中奖segment

代码实现 #

import { useState, useCallback } from 'react';
import WheelComponent from 'react-wheel-of-prizes';

const LotteryWheel = () => {
  // 示例segments：第一个为中奖项，其余为非中奖项，可根据实际需求调整
  const segments = ["MM", "谢谢参与", "谢谢参与", "谢谢参与", "谢谢参与"];
  const segColors = ["#FFD700", "#CCCCCC", "#CCCCCC", "#CCCCCC", "#CCCCCC"];

  // 状态管理
  const [currentCycleCount, setCurrentCycleCount] = useState(0); // 当前周期内已抽奖次数
  const [currentWinningPosition, setCurrentWinningPosition] = useState(() => {
    // 初始化第一个周期的中奖位置（1-5随机）
    return Math.floor(Math.random() * 5) + 1;
  });
  const [lastWinningPosition, setLastWinningPosition] = useState(null); // 上一个周期的中奖位置

  // 生成下一个周期的中奖位置，确保与上一周期不重复
  const generateNextWinningPosition = useCallback(() => {
    let newPos;
    do {
      newPos = Math.floor(Math.random() * 5) + 1;
    } while (newPos === lastWinningPosition);
    return newPos;
  }, [lastWinningPosition]);

  // 抽奖结束后的状态更新逻辑
  const onFinished = (winner) => {
    console.log("抽奖结果:", winner);
    const newCount = currentCycleCount + 1;
    setCurrentCycleCount(newCount);

    // 完成当前周期（第5次抽奖）后，切换到下一个周期
    if (newCount === 5) {
      setLastWinningPosition(currentWinningPosition);
      setCurrentWinningPosition(generateNextWinningPosition());
      setCurrentCycleCount(0); // 重置周期计数
    }
  };

  // 动态计算当前抽奖的中奖segment
  const getWinningSegment = useCallback(() => {
    const currentDrawNum = currentCycleCount + 1;
    // 当前次数命中中奖位置则返回中奖项，否则随机返回非中奖项
    if (currentDrawNum === currentWinningPosition) {
      return "MM";
    } else {
      const nonWinningSegments = segments.filter(seg => seg !== "MM");
      return nonWinningSegments[Math.floor(Math.random() * nonWinningSegments.length)];
    }
  }, [currentCycleCount, currentWinningPosition, segments]);

  return (
    <WheelComponent
      segments={segments}
      segColors={segColors}
      winningSegment={getWinningSegment()}
      onFinished={(winner) => onFinished(winner)}
      primaryColor="#5C0632"
      contrastColor="gray"
      buttonText="Start"
      isOnlyOnce={false}
      size={280}
      upDuration={500}
      downDuration={600}
      fontFamily="Helvetica"
    />
  );
};

export default LotteryWheel;

关键逻辑说明 #

1. 初始化处理：组件首次加载时，随机生成第一个周期的中奖位置（1-5）
2. 动态中奖判断：每次渲染时，根据当前周期内的抽奖次数判断是否命中中奖位置，返回对应的segment
3. 周期切换机制：完成5次抽奖后，生成下一个周期的中奖位置（确保与上一周期位置不重复），并重置周期计数
4. 非中奖结果优化：非中奖时从非中奖segment中随机选择，避免结果过于固定，提升真实感

注意事项 #

• 请根据实际需求调整segments数组中的中奖项和非中奖项内容
• 如果需要页面刷新后保留周期状态，可以将相关状态存储到localStorage，在组件初始化时读取

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