如何获取React中Ball组件的位置以实现交换逻辑？

首先要纠正你当前代码里的核心问题：typeof Ball是组件的类型，不是球的实例或数据。React组件是纯函数，你需要管理的是球的状态数据，而非组件本身。下面提供两种可行方案，优先推荐状态驱动的实现方式：

方案一：状态驱动（推荐，符合React设计理念） #

直接通过管理球的状态数据来获取位置，无需操作DOM。

1. 定义球的数据类型 #

interface BallData {
  id: number; // 唯一标识，用于区分不同球
  num: number;
  positionx: string; // 若要方便计算，可改为number类型，渲染时拼接"px"
  positiony: string;
  ballColor: string;
}

2. 修改InsertionSortView的Props #

interface viewProps {
  balls: BallData[];
  onUpdateBalls: (updatedBalls: BallData[]) => void; // 用于通知父组件更新状态
}

3. 重写swap函数，直接操作数据 #

const swap = (ball1: BallData, ball2: BallData): [BallData, BallData] => {
  // 从数据中提取位置并转为数字计算
  const ball1X = parseInt(ball1.positionx, 10);
  const ball1Y = parseInt(ball1.positiony, 10);
  const ball2X = parseInt(ball2.positionx, 10);
  const ball2Y = parseInt(ball2.positiony, 10);

  // 这里编写你的交换动画逻辑，计算新位置
  // 示例：直接交换两个球的位置
  const updatedBall1 = { ...ball1, positionx: `${ball2X}px`, positiony: `${ball2Y}px` };
  const updatedBall2 = { ...ball2, positionx: `${ball1X}px`, positiony: `${ball1Y}px` };

  return [updatedBall1, updatedBall2];
};

4. 在InsertionSortView中使用 #

function InsertionSortView({ balls, onUpdateBalls }: viewProps) {
  const handleSwap = (ball1Id: number, ball2Id: number) => {
    const ball1 = balls.find(b => b.id === ball1Id);
    const ball2 = balls.find(b => b.id === ball2Id);
    if (!ball1 || !ball2) return;

    const [updatedBall1, updatedBall2] = swap(ball1, ball2);
    // 更新整个球数组
    const updatedBalls = balls.map(b => {
      if (b.id === ball1Id) return updatedBall1;
      if (b.id === ball2Id) return updatedBall2;
      return b;
    });
    onUpdateBalls(updatedBalls);
  };

  return (
    <div style={{ position: 'relative', minHeight: '200px' }}>
      {balls.map(ball => (
        <Ball
          key={ball.id}
          num={ball.num}
          positionx={ball.positionx}
          positiony={ball.positiony}
          ballColor={ball.ballColor}
        />
      ))}
      <button onClick={() => handleSwap(1, 2)}>交换1号和2号球</button>
    </div>
  );
}

方案二：使用React Ref获取DOM实际位置 #

若你需要获取元素渲染后的真实位置（比如受父容器布局影响的坐标），可以用Ref实现：

1. 修改Ball组件，支持ForwardRef #

import CSS from "csstype";
import { forwardRef } from 'react';

const circleAroundNumber: CSS.Properties = {
  width: '50px',
  height: '50px',
  borderRadius: '50%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  position: 'absolute',
};

interface Props {
  num: number;
  positionx: string;
  positiony: string;
  ballColor: string;
}

// 用forwardRef把DOM元素的Ref暴露给父组件
const Ball = forwardRef<HTMLDivElement, Props>(({ num, positionx, positiony, ballColor }, ref) => {
  const combinedStyles: CSS.Properties = {
    ...circleAroundNumber,
    background: ballColor,
    left: positionx,
    top: positiony,
  };
  return <div ref={ref} style={combinedStyles}>{num}</div>;
});

Ball.displayName = 'Ball';

export default Ball;

2. 在InsertionSortView中使用Ref获取位置 #

import { useRef } from 'react';
import Ball from "../components/Ball";

interface BallData {
  id: number;
  num: number;
  positionx: string;
  positiony: string;
  ballColor: string;
}

interface viewProps {
  balls: BallData[];
}

function InsertionSortView({ balls }: viewProps) {
  const ballRefs = useRef<(HTMLDivElement | null)[]>([]);

  // 获取指定索引球的DOM位置
  const getBallPosition = (index: number) => {
    const el = ballRefs.current[index];
    if (!el) return null;
    const rect = el.getBoundingClientRect();
    // 返回视口坐标，若需父容器相对坐标，可减去父容器的rect值
    return {
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height
    };
  };

  const handleSwap = (index1: number, index2: number) => {
    const pos1 = getBallPosition(index1);
    const pos2 = getBallPosition(index2);
    if (!pos1 || !pos2) return;

    // 这里可以用真实位置做动画计算
    console.log('球1位置:', pos1);
    console.log('球2位置:', pos2);
  };

  return (
    <div style={{ position: 'relative', minHeight: '200px' }}>
      {balls.map((ball, index) => (
        <Ball
          key={ball.id}
          num={ball.num}
          positionx={ball.positionx}
          positiony={ball.positiony}
          ballColor={ball.ballColor}
          ref={(el) => (ballRefs.current[index] = el)}
        />
      ))}
      <button onClick={() => handleSwap(0, 1)}>获取位置并交换</button>
    </div>
  );
}

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