React中如何在同一个组件内选中多个带有指定类名的HTML元素

方案1：使用 ref 回调动态收集所有目标元素 #

该方案不需要预先知道元素数量，会自动收集所有绑定了对应回调的元素：

import { useRef, useEffect } from 'react';

const MyComponent = () => {
    // 存储所有.sum元素的容器
    const sumRefs = useRef([]);

    useEffect(() => {
        // 组件挂载完成后即可拿到全部.sum元素
        sumRefs.current.forEach(el => {
            // 此处编写对DOM元素的操作逻辑，比如读取尺寸、修改样式等
            console.log(el.offsetHeight);
        });
    }, []);

    // 每次渲染前清空ref容器，避免更新时出现无效/重复的DOM引用
    sumRefs.current = [];

    return (
        <div className="container">
            <div></div>
            <div className="sum" ref={el => el && sumRefs.current.push(el)}></div>
            <div></div>
            <div></div>
            {/* 所有.sum元素都添加相同的ref回调即可 */}
            <div className="sum" ref={el => el && sumRefs.current.push(el)}></div>
            <div className="sum" ref={el => el && sumRefs.current.push(el)}></div>
        </div>
    );
};

方案2：父容器范围查询（更简洁） #

该方案不需要给每个目标元素加ref，仅通过父容器的ref做范围查询，不会选中组件外的同类型元素，符合React使用规范：

import { useRef, useEffect } from 'react';

const MyComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        // 仅在当前组件的container范围内查询.sum元素，不会污染全局
        const sumElements = containerRef.current.querySelectorAll('.sum');
        console.log(sumElements);
        // 后续批量操作逻辑
    }, []);

    return (
        <div className="container" ref={containerRef}>
            <div></div>
            <div className="sum"></div>
            <div></div>
            <div></div>
            <div className="sum"></div>
            <div className="sum"></div>
        </div>
    );
};

选型建议 #

• 若需要单独绑定每个目标元素的引用、或元素会频繁增删需要精准对应，选择方案1
• 若仅需要批量操作全部目标元素，方案2代码更简洁，侵入性更低

内容的提问来源于stack exchange，提问作者Azu