使用 React 在棋盘上移动“棋子”

Question

我正在使用 create-react-app 开发一个“简单”的棋盘游戏。我有一个由瓷砖制成的板组件。我想根据每个玩家的位置在棋盘上移动一个棋子（位置在每个玩家的状态对象中保存和更新）。每个图块都有一个唯一的 ID。本质上，我想在 userPosition 和 tile id 之间进行某种比较检查，并将用户的 pawn 呈现在匹配的 tile 上。 我想了两种方法来做到这一点，既麻烦又不太管用：

1. 在每个磁贴内为每个用户设置一个 pawn，并使用 CSS 切换它们是否可见。

2. 运行一个开关检查 userPosition，并相应地更新 CSS 位置属性。

这两种方法的问题是我需要能够定位 DOM 元素：在第一个选项中，我需要能够检查每个图块的 id。在第二个选项中，我需要能够定位元素以更改它的 CSS 位置。使用“常规” DOM 方法，例如：

let myElement = document.getElementById("p1");

不起作用。 我一直在阅读，也许我需要使用 ref 方法，但是我正在使用带有钩子的函数式反应，所以我没有一个类来扩展它？

另外，关于如何在棋盘上以视觉方式移动棋子，我完全愿意接受其他想法，这只是我想出的两个想法。

一些代码：

网格：

function Board () {




   return (


      <div className="boardContainer">
         <div className="row">
            <div className="col tile" id="1">
               *
            </div>
            <div className="col tile" id="2" >
               *
            </div>
            <div className="col tile" id="3">
               *
            </div>
            <div className="col tile" id="4">
               *
            </div>
            <div className="col tile" id="5">
               *
            </div>    
         </div>

棋子：

<span className="dot1" id="p1"></span>
    <span className="dot2"></span>
    <span className="dot3"></span>
    <span className="dot4"></span>

Answer 1

有很多方法可以做到这一点，而无需直接 DOM 操作。

你可以有一个<Tile> 组件，如果玩家在那里，它接受一个布尔值，如果一个玩家在那里，则呈现不同：

function Tile({hasPlayer}) {
  return <div className="col tile">
    {hasPlayer ? <span className="dot1" /> : '*'}
  </div>
}

现在你可以像这样创建一行：

<div className="row">
  {[1,2,3,4,5].map(tileId => (
    <Tile hasPlayer={tileId === playerPosition} />
  )}
</div>

---

或者您可以设置 pawn 的内联样式以绝对定位 pawn。

CSS：

.pawn {
  position: absolute;
  transition: left 0.5s, top 0.5s; // smoothly move the pawn
}

如果您知道图块有一定的大小，比如 50 像素，那么您可以：

<span
  className="pawn"
  style={{
    left: playerPosition.x * 50,
    top: playerPosition.y * 50,
  }}
/>

---

一般来说，将您的游戏视为纯数据。您只是拥有让您了解游戏中发生的事情的状态。然后，您只需渲染该状态。

不要想着在网页上移动东西。只需更新记录游戏状态的数据，然后渲染即可。