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添加到所需的元素。您可以通过检查地图中的索引来查找第一个和最后一个元素。

在React中使用带有useEffect的querySelector来修改HTML元素

1 个答案: