2

我在我的 React 功能组件中动态添加卡片。卡片存储在状态中。我映射它们并给它们每个ID。OnClick 那些卡片我成功地得到了他们的 id。现在我想用 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 中通过 id 访问我的元素呢？

4

1 回答 1

5

您也可以ref在功能组件中使用。有一个钩子叫做useRef.

注意：永远不要直接交互，DOM除非没有可用的 api 来响应解决特定用例的问题。

在 react 中不建议直接与 dom 交互。始终使用 react apis 与 dom 交互。React 旨在隐藏 DOM，因为他们想将 DOM 抽象掉。通过直接使用 DOM，您打破了抽象并使您的代码对库中引入的更改变得脆弱。

如果我们直接DOM在实际中进行任何更改，React 正在维护一个虚拟，那么将不会意识到此更改，这可能会导致一些意外行为。DOMreact

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>
    </>
  );
}
于 2020-01-18T08:31:08.740 回答