在 react 中按类名查找所有元素-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > react >

vue react javascript angular css html

在 react 中按类名查找所有元素

作者：迹忆客最近更新：2023/03/15 浏览次数：

在 react 中通过 classname 查找所有元素：

使用 getelementsbyclassname 方法获取具有特定类的所有元素。
将对该方法的调用放在 useeffect() 钩子中。

import {useeffect} from 'react';
const app = () => {
  useeffect(() => {
    const allwithclass = array.from(
      document.getelementsbyclassname('example')
    );
    console.log(allwithclass);
  }, []);
  return (
    <div>
      <div>
        <h2 classname="example">aliceh2>
        <h2 classname="example">bobh2>
        <h2 classname="example">carlh2>
      div>
    div>
  );
};
export default app;

我们将一个空的 dependencies 数组传递给 useeffect 钩子，因此它只会在组件安装时运行。

我们使用 document.getelementsbyclassname 方法来选择页面上具有示例类的所有元素。

使用 queryselectorall 在 react 中按类名查找所有元素

但是，我们也可以使用 document.queryselectorall 方法，我们可以向该方法传递一个选择器而不仅仅是一个类名。

import {useeffect} from 'react';
const app = () => {
  useeffect(() => {
    const allwithclass = array.from(
      document.queryselectorall('h2.example')
    );
    console.log(allwithclass);
  }, []);
  return (
    <div>
      <div>
        <h2 classname="example">aliceh2>
        <h2 classname="example">bobh2>
        <h2 classname="example">carlh2>
      div>
    div>
  );
};
export default app;

我们将选择器传递给 queryselectorall 方法。上面的示例选择了页面上所有具有 example 类的 h2 元素。

我们使用 array.from 方法将集合转换为数组。但是，这对于您的用例可能不是必需的。

我们可以遍历元素数组并对每个元素执行操作。下面是一个示例，它更改了具有示例类的每个 h2 元素的背景颜色。

import {useeffect} from 'react';
const app = () => {
  useeffect(() => {
    const allwithclass = array.from(
      document.queryselectorall('h2.example')
    );
    console.log(allwithclass);
    allwithclass.foreach(element => {
      element.style.backgroundcolor = 'salmon';
    });
  }, []);
  return (
    <div>
      <div>
        <h2 classname="example">aliceh2>
        <h2 classname="example">bobh2>
        <h2 classname="example">carlh2>
      div>
    div>
  );
};
export default app;

上一篇：在 react 中检查元素是否获取到焦点

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

发布时间：2023/03/29 浏览次数：514 分类：vue

vue 是一个非常强大的 javascript 框架，它为开发人员提供了很多方便的功能和工具。其中之一是按类名查找所有元素。在本文中，我们将探讨如何在 vue 中按类名查找所有元素，并提供一

node.js 与 react js 的比较

发布时间：2023/03/27 浏览次数：173 分类：node.js

本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。这些库用于构建用户界面和服务器端应用程序。

在 typescript 中 react usestate 钩子类型

发布时间：2023/03/19 浏览次数：246 分类：

本教程演示了如何在 typescript 中使用 react usestate hook。

typescript 中的 react 事件类型

发布时间：2023/03/19 浏览次数：477 分类：

本教程演示了如何在 typescript 中为 react 事件添加类型支持。

在 react 中循环遍历对象数组

发布时间：2023/03/18 浏览次数：602 分类：react

在 react 中循环对象数组：使用 map() 方法迭代数组。我们传递给 map() 的函数会为数组中的每个元素调用。该方法返回一个新数组，其中包含传入函数的结果。 export default function app (

获取 react 中元素的类名

发布时间：2023/03/18 浏览次数：340 分类：react

在 react 中使用 event.target 获取元素的类名获取元素的类名：将元素上的 onclick 属性设置为事件处理函数。访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons

如何将 key 属性添加到 react 片段

发布时间：2023/03/18 浏览次数：206 分类：react

使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react

如何在 react 中删除事件监听器

发布时间：2023/03/15 浏览次数：592 分类：react

在 react 中删除事件监听器：在 useeffect 挂钩中添加事件侦听器。从 useeffect 挂钩返回一个函数。当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r

发布时间：2023/03/15 浏览次数：261 分类：react

react 中在 map() 中使用条件：在数组上调用 map() 方法。使用 if 条件，如果条件满足则显式返回。否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =

在 react 中按类名查找所有元素-ag捕鱼王app官网