使用react-confetti实现多元素彩屑效果失败：仅最后一个元素生效

嘿，折腾两天确实够头疼的！咱们一步步拆解问题，找到根源解决它：

核心问题：默认定位导致画布叠加 #

你看不到所有卡片的彩屑，本质原因是react-confetti的canvas默认是position: fixed定位——这种定位是相对于浏览器视口的，哪怕你把它放在position: relative的父容器里，所有Confetti的画布还是会固定在视口的同一位置，后面渲染的画布会直接覆盖前面的，所以你只能看到最后一个的效果（虽然你能看到每个画布的背景色，那是因为它们叠加在一起了）。

解决方案一：修正Confetti的定位样式 #

给Confetti组件加上绝对定位样式，让它乖乖待在父级的relative容器里：

<Confetti
  style={{
    position: 'absolute', // 替换默认的fixed
    top: 0,
    left: 0,
    backgroundColor: 'blanchedalmond'
  }}
  width={cardDimensions.width}
  height={cardDimensions.height}
  recycle={true}
  key={`confetti-${player.id}`}
/>

这样每个彩屑画布都会被限制在对应的卡片容器内，不会互相覆盖。

解决方案二：修复卡片尺寸计算的ref问题 #

你现在在父组件里用单个cardRef传给所有子组件，这会导致cardRef.current最后只会指向最后一个渲染的卡片元素，所有子组件拿到的cardDimensions其实都是最后一张卡片的尺寸（如果卡片尺寸有差异，这个问题会更明显）。

正确的做法是让每个PlayerCardWithConfetti自己维护独立的ref和尺寸：

1. 在子组件内部创建专属的ref和状态：

import { useRef, useState, useEffect } from 'react';

const PlayerCardWithConfetti = ({ player, winners }) => {
  const cardRef = useRef(null);
  const [cardDimensions, setCardDimensions] = useState({ width: 0, height: 0 });

  const updateCardDimensions = () => {
    if (cardRef.current) {
      const rect = cardRef.current.getBoundingClientRect();
      setCardDimensions({ width: rect.width, height: rect.height });
    }
  };

  useEffect(() => {
    updateCardDimensions();
    window.addEventListener('resize', updateCardDimensions);
    return () => window.removeEventListener('resize', updateCardDimensions);
  }, []);

  const isPlayerWinner = (playerId) => winners.some(winner => winner.id === playerId);

  return (
    <div className="col-md-4 mb-3">
      <div style={{ position: 'relative' }}>
        {isPlayerWinner(player.id) && (
          <Confetti
            style={{ position: 'absolute', top: 0, left: 0, backgroundColor: 'blanchedalmond' }}
            width={cardDimensions.width}
            height={cardDimensions.height}
            recycle={true}
            key={`confetti-${player.id}`}
          />
        )}
        <PlayerCard
          player={player}
          isWinner={isPlayerWinner(player.id)}
          cardRef={cardRef}
          // 其他必要props
        />
      </div>
    </div>
  );
};

2. 父组件简化传参，去掉统一的cardRef和cardDimensions：

{gameData.players.map((player) => {
  return (
    <PlayerCardWithConfetti
      key={player.id}
      player={player}
      winners={winners}
      // 其他必要props
    />
  );
})}

验证效果 #

现在不管是循环渲染还是手动写多个组件，每个获胜卡片都会显示独立的彩屑效果啦！

备注：内容来源于stack exchange，提问作者septimus