在React中使用querySelectors和useEffect来修改HTML元素

Question

我正试图在加载时将一个类添加到HTML元素中，该元素将使用React中的功能组件进行渲染。当我尝试使用useEffect()执行此操作时，它不起作用，因为函数在我可以访问元素并返回undefined之前就运行了。我一直在研究这个问题，但仍然找不到解决方案。我正在尝试这样的东西：

function myComponent() {
useEffect(() => {
const el = document.querySelectorAll(".item");
const firstEl = el[0];
const lastEl = el[el.length -1];
firstEl.classList.add("red"); // Add class to the first element with class .item
lastEl.classList.add("blue"); // Add class to the last element with class .item
}, [])
return (
<div> // We don't know how many items there are going to be, for simplicity here are three span's
<span className="item">1</span>
<span className="item">2</span>
<span className="item">3</span>
</div>
);
}

这在纯HTML和javascript中相当容易，但我很难让useEffect()中的代码访问组件中的元素。

PD:为了简单起见，我将项目设置为三个<span>，但实际上这些项目是有条件渲染的，我不知道它们会有多少。此外，我知道使用css子选择器可以实现类似的效果，我希望我能使用它们，我给出的例子只是简化了代码，使问题更容易理解，但在我的特定情况下，我需要使用javascript选择器，我还需要一种在ReactJS中实现这一点的方法。

Answer 1

据我所知，您的问题只是情况的简化形式
您可能有一个项目数组，并且要对它们进行渲染
无需以这种方式选择第一项和最后一项。您可以简单地过滤要渲染的有效项，然后通过它们进行映射，最后将适当的className添加到所需的元素中。您可以通过检查地图中的索引来查找第一个和最后一个元素。