getElementById после его динамического добавления в React

Question

Я добавляю карты динамически в мой функциональный компонент React. Карты хранятся в гос. Я сопоставляю их и даю идентификатор каждому из них. OnClick на эти карты, я получаю их идентификатор успешно. Теперь я хочу, чтобы getElementById изменил цвет карты:

function Clicked(pressedGifId) {
  if (pressedGifId === 'correctGif') CorrectMatch();
  else WrongMatch();
}

function CorrectMatch(pressedGifId) {
  // / THERE I GET Element: null
  console.log('Element:', document.getElementById(pressedGifId));
}
function WrongMatch() {
  console.log('wrong a match!');
}

export default function GameObject(props) {
  const addedToGameGif = [];
  const [pressedGifId, gifPressed] = useState(null);
  const [photoCards, setPhotoCards] = useState([]);

  useEffect(() => {
    Clicked(pressedGifId);
  }, [pressedGifId]);

  // add randomly picked photos to addedToGameGif array
  // ...

  addedToGameGif.map(gifId =>
    photoCards.push(
      <Card id={gifId} onClick={() => gifPressed(gifId)}>
        text
      </Card>,
    ),
  );

  return <div>{photoCards}</div>;
}

Я пробовал изучать ссылки, но они только для компонентов класса. Итак, как мне достичь своего элемента по идентификатору в React?

Answer 1

Вы также можете использовать ref в функциональном компоненте. Существует хук, называемый useRef.

Примечание. Никогда не взаимодействуйте напрямую с DOM до тех пор, пока не будет доступен API для реагирования для решения проблемы для этого конкретного варианта использования.

В реакции не рекомендуется напрямую взаимодействовать с домом. Всегда используйте реагировать на взаимодействие с домом. React предназначен для сокрытия DOM, потому что они хотят абстрагировать DOM. Используя DOM напрямую, вы нарушаете абстракцию и делаете свой код ломким к изменениям, внесенным в библиотеку.

React поддерживает виртуальный DOM, если мы вносим какие-либо изменения в действительный DOM непосредственно, то react не будет знать об этом изменении, и это может привести к неожиданному поведению.

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

export default function GameObject(props) {
  const addedToGameGif = [];
  const [pressedGifId, gifPressed] = useState(null);
  const [photoCards, setPhotoCards] = useState([]);
  const elemRef = useRef(null);

  useEffect(() => {
    Clicked(pressedGifId);
  }, [pressedGifId]);

  // add randomly picked photos to addedToGameGif array
  // ...

  addedToGameGif.map(gifId =>
    photoCards.push(
      <Card ref={elemRef} id={gifId} onClick={() => gifPressed(gifId)}>
        text
      </Card>
    )
  );

  return <div>{photoCards}</div>;
}

Пример из официальных документов.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}