Javascript 在React中是否有查询选择器all的替代方案？

我正在尝试使用React重构一些javascript代码。我想做的是->我有一些元素具有相同的类名，我想控制每个元素。为此，在javascript中，我可以只使用queryselectorAll和forEach函数，如

<Svg>
   <circle cx="100" cy="60" r="20" class="human"></circle>
   <line x1="100" y1="80" x2="100" y2="120" class="human"></line>
   <line x1="70" x2="100" y1="75" y2="95" class="human"></line>
   <line x1="130" x2="100" y1="75" y2="95" class="human"></line>
   <line x1="70" x2="100" y1="140" y2="120" class="human"></line>
   <line x1="130" x2="100" y1="140" y2="120" class="human"></line>
</Svg>

const wrongLetters = [];
window.addEventListener('keydown", (e) => {
  if(e.keyCode >= 65 && e.keyCode <= 90) {
    wrongLetters.push(e.key)
  }
}

const humans = documentSelectorAll(".human")
humans.forEach((human, index) => {
if (index < wrongLetters.length) {
    human.style.display = "block";
  }
  if (6 === wrongLetters.length) {
    popUpContainer.style.display = "flex";
    comment.innerText = "You have lost";
  }
}); }

常量错误字母=[]；
window.addEventListener（'keydown'，（e）=>{
如果（e.keyCode>=65&&e.keyCode{
如果（索引<错误字母.长度）{
human.style.display=“block”；
}
如果（6==错误的字母。长度）{
popUpContainer.style.display=“flex”；
comment.innerText=“您已丢失”；
}
}); }

然而，我假设即使我将“class”更改为“className”，反应也会有所不同？为此，我已经搜索了一些相关帖子，并尝试使用“ref”，但仍然不知道在这种情况下该怎么做。 如有任何建议，将不胜感激

---

+编辑/我想做的是，每次我向'ErrorLetters'数组中添加一个元素时，Svg标记中的每个元素都会显示出来。每个Svg元素在javascript中默认设置为'display:none'，如果你想访问中的DOM，你必须使用createRef（）创建ref钩子，然后您可以像javascript一样在react中访问Dom

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.myRef=React.createRef（）； } render（）{ 返回； }

---

}将

错误字母

置于更改的状态，而不是推送到数组。然后，在React中，分析该状态以确定需要隐藏的元素数量。由于这可以包含您正在寻找的所有功能，因此无需使用

useRef

访问单个DOM元素>或

querySelectorAll

：

const-App=（）=>{
const[pressed，setPressed]=React.useState（[]）；
React.useffect（（）=>{
window.addEventListener（'keydown'，（e）=>{
如果（！pressed.includes（e.keyCode）&&e.keyCode>=65&&e.keyCode[…pressed，e.keyCode]）；
}
});
}, []);
返回(
5？'block'：'none'}cx=“100”cy=“60”r=“20”stroke=“black”>
4？'block'：'none'}x1=“100”y1=“80”x2=“100”y2=“120”stroke=“black”>
3？'block'：'none'}x1=“70”x2=“100”y1=“75”y2=“95”stroke=“black”>
2？'block'：'none'}x1=“130”x2=“100”y1=“75”y2=“95”stroke=“black”>
1？'block'：'none'}x1=“70”x2=“100”y1=“140”y2=“120”stroke=“black”>
0？'block'：'none'}x1=“130”x2=“100”y1=“140”y2=“120”stroke=“black”>
);
}
ReactDOM.render（，document.querySelector（'.react'）；

行{
颜色：黑色；
}

---

正如我在评论中所说，在react中，您将拥有一个组件，该组件可以呈现这些元素，根据应用程序或组件状态的变化进行更新或呈现不同的元素。您很少需要在react中直接访问DOM

我的意思是，这是一个粗略的实现。有一个：

import React，{useffect}来自“React”；
导入“/styles.css”；
//svg元素的数组；下面的组件呈现
//根据尝试次数的一个子集。
//我不确定在现实世界中我会这样做
//但是对于这个演示来说已经足够好了。
常量段=[
,
,
,
,
,
];
导出默认函数App（）{
//跟踪组件状态下的尝试次数
常量[attempts，setAttempts]=React.useState（0）；
//用于此演示的keydown事件的处理程序
//除了增加尝试次数之外，什么都不做
const onKeyDown=React.useCallback（（）=>setAttempts（尝试次数+1）[
尝试
]);
useffect（（）=>{
//当组件挂载时，添加keydown侦听器
window.addEventListener（“keydown”，onKeyDown）；
//当组件卸载时，请删除侦听器
return（）=>window.removeEventListener（“keydown”，onKeyDown）；
}，[onKeyDown]）；
//根据尝试次数获取段的可见子集
const visibleSegments=segments.slice（0，尝试次数）；
//返回新标记
返回(
{visibleSegments}
{尝试次数>=segments.length&&(
你输了什么
setAttempts（0）}>重置
)}
);
}

通常情况下，你不会在react中与DOM交互。很难给出一个上帝的答案，因为我们不知道你到底想做什么。这实际上取决于

的内容，在Javascript中做我想做的事情，你能详细说明一下你想在那里做什么吗？在react中，你会有一个组件来呈现这些元素，并进行更新根据应用程序或组件状态的变化，可以使用它们或呈现不同的元素。您几乎不需要在react中直接访问DOM。@当然，由于我编辑了我的post@Junyoung请参阅我的答案和工作演示，了解我的意思。
import React, { useEffect } from "react";
import "./styles.css";

// an array of the svg elements; the component below renders
// a subset of these according to number of attempts.
// i'm not sure this is how i'd do this in the real world
// but it's good enough for this demo.
const segments = [
  <circle cx="100" cy="60" r="20" class="human"></circle>,
  <line x1="100" y1="80" x2="100" y2="120" class="human"></line>,
  <line x1="70" x2="100" y1="75" y2="95" class="human"></line>,
  <line x1="130" x2="100" y1="75" y2="95" class="human"></line>,
  <line x1="70" x2="100" y1="140" y2="120" class="human"></line>,
  <line x1="130" x2="100" y1="140" y2="120" class="human"></line>
];

export default function App() {
  // track the number of attempts in component state
  const [attempts, setAttempts] = React.useState(0);

  // handler for keydown events that for this demo
  // doesn't do anything besides increment the number of attempts
  const onKeyDown = React.useCallback(() => setAttempts(attempts + 1), [
    attempts
  ]);

  useEffect(() => {
    // when the component mounts, add the keydown listener
    window.addEventListener("keydown", onKeyDown);

    // when the component unmounts remove the listener
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [onKeyDown]);

  // get the visible subset of segments based on number of attempts
  const visibleSegments = segments.slice(0, attempts);

  // return the new markup
  return (
    <div className="App">
      <svg viewBox="0 0 200 200" style={{ width: "300px" }}>
        {visibleSegments}
      </svg>
      {attempts >= segments.length && (
        <div>
          <div>You Lose or whatever</div>
          <button onClick={() => setAttempts(0)}>Reset</button>
        </div>
      )}
    </div>
  );
}