时间戳

首页 > 解决方案 > 在 React 中使用带有 useEffect 的 querySelectors 来修改 HTML 元素

javascript - 在 React 中使用带有 useEffect 的 querySelectors 来修改 HTML 元素

问题描述

我正在尝试将加载类添加到 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：为简单起见，我将项目设置为 3 <span>，但实际上这些项目是有条件地渲染的，我不知道它们将是多少。另外，我知道您可以使用 css 子选择器实现类似的功能，我希望我可以使用它们，我给出的示例只是对代码的简化，以使问题更容易理解，但在我的具体情况下，我需要使用 javascript 选择器，而且我还需要一种在 ReactJS 中执行此操作的方法。

标签： javascripthtmlreactjsdomreact-hooks

解决方案

据我了解，您的问题是这种情况的简化形式。
您可能有一组项目，并且您将要渲染它们。
这种方式不需要选择第一项和最后一项。您可以简单地过滤有效项目以进行渲染，然后通过它们进行映射，最后将正确的类名添加到您想要的元素中。您可以通过检查地图内的索引来找到第一个和最后一个元素。

推荐阅读