перемещая «кусочки» по доске с помощью React

Question

Я работаю над «простой» настольной игрой, использующей приложение create-реагировать. У меня есть компонент платы, построенный из плиток. Я хочу переместить пешку по доске в соответствии с позицией каждого игрока (позиция сохраняется и обновляется в объекте состояния каждого игрока). Каждая из плиток имеет уникальный идентификатор. По сути, я хочу сделать некоторую проверку сравнения между userPosition и id плитки, и отрендерить пешку пользователя на соответствующей плитке. Я подумал о двух способах сделать это, оба громоздкие и не вполне работающие:

1. Пешка для каждого пользователя установлена ​​внутри каждой плитки, и используйте CSS для переключения, если они видимы или нет.

2. Запустите переключатель, проверяя userPosition и обновляя свойство позиции CSS соответственно.

Проблема с обоими эти методы состоят в том, что мне нужно иметь возможность нацеливаться на элементы DOM: в первом варианте мне нужно иметь возможность проверять идентификатор каждой плитки. Во втором варианте мне нужно иметь возможность нацелить элемент, чтобы изменить его положение 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>

---

Или вы можете установить встроенные стили пешки, чтобы расположить пешку абсолютно.

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,
  }}
/>

---

В общем Думайте о своей игре как о чистых данных. У вас просто есть состояние, позволяющее узнать о том, что происходит в игре. Тогда вы просто визуализируете это состояние.

Не думайте о перемещении вещей на веб-странице. Просто обновите данные, которые записывают состояние игры, а затем просто отобразите их.