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

Question

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

1. 为每个用户在每个磁贴中设置一个棋子，并使用CSS切换是否可见。

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

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

let myElement = document.getElementById("p1");
无效。我一直在阅读，也许我需要使用ref方法，但是我正在使用带有钩子的函数react，所以我没有一个类可以将其扩展到？
此外，关于如何在棋盘上以视觉方式移动棋子，我也完全开放其他想法，这些只是我提出的两个想法。

某些代码：

网格：

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>
我正在使用create-react-app开发“简单”的棋盘游戏。我有一个用瓷砖建造的板子组件。我想根据每个玩家的位置在棋盘上移动棋子（位置为...

Answer 1

有一种lot

的方法，无需直接进行DOM操作。