Javascript 在React中动态添加getElementById后

我正在React功能组件中动态添加卡片。卡片以状态存储。我给他们绘制地图，并给他们每个人一个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>;
}

单击功能（按Edgifid）{
如果（按Edgifid===“correctGif”）CorrectMatch（）；
else错误匹配（）；
}
功能校正匹配（按Edgifid）{
///在那里我得到元素：null
log（'Element:'，document.getElementById（pressedGifId））；
}
函数错误匹配（）{
log（'匹配错误！'）；
}
导出默认功能游戏对象（道具）{
常量addedToGameGif=[]；
常量[pressedGifId，gifPressed]=使用状态（null）；
const[photoCards，setPhotoCards]=useState（[]）；
useffect（（）=>{
单击（按Edgifid）；
}，[pressedGifId]）；
//将随机拾取的照片添加到addedToGameGif阵列
// ...
addedToGameGif.map（gifId=>
推(
gifId（gifId）}>
文本
,
),
);
返回{photoCards}；
}

---

我试着学习参考文献，但它们只用于类组件。那么如何在React中通过id到达元素？

您也可以在functional component中使用

ref

。有一个名为

useRef

的钩子

注意：除非react中没有api可用于解决特定用例的问题，否则不要直接与

DOM

交互

---

在react中，不建议直接与dom交互。始终使用react API与dom交互。React设计用于隐藏DOM，因为它们希望将DOM抽象出来。通过直接使用DOM，您打破了抽象，并使代码对库中引入的更改变得脆弱

React正在维护一个虚拟的

DOM

，如果我们直接在实际的

DOM

中进行任何更改，那么

React

将不会意识到此更改，这可能会导致一些意外行为

import React，{useState，useRef}来自“React”；
导出默认功能游戏对象（道具）{
常量addedToGameGif=[]；
常量[pressedGifId，gifPressed]=使用状态（null）；
const[photoCards，setPhotoCards]=useState（[]）；
常量elemRef=useRef（null）；
useffect（（）=>{
单击（按Edgifid）；
}，[pressedGifId]）；
//将随机拾取的照片添加到addedToGameGif阵列
// ...
addedToGameGif.map（gifId=>
推(
gifId（gifId）}>
文本
)
);
返回{photoCards}；
}

来自官方文档的示例。

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>
    </>
  );
}

函数TextInputWithFocusButton（）{
const inputEl=useRef（null）；
常量onButtonClick=（）=>{
//`current`指向装入的文本输入元素
inputEl.current.focus（）；
};
返回(
集中输入
);
}

这是我犯的一个愚蠢的错误：我之前没有通过pressedGifId来更正匹配函数。。。。但是getElementById现在工作得非常完美。为什么我应该使用refs而不是简单的getElementById？在react中，不建议直接与dom交互。始终使用react API与dom交互。React设计用于隐藏DOM，因为它们希望将DOM抽象出来。通过直接使用DOM，您打破了抽象，使代码对库中引入的更改变得脆弱，React正在维护一个虚拟的

DOM

，如果我们直接在实际的

DOM

中进行任何更改，那么

React

将不会意识到此更改，这可能会导致一些意外行为。

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>
    </>
  );
}