react动态绑定ref

最新推荐文章于 2026-04-13 16:47:44 发布

原创最新推荐文章于 2026-04-13 16:47:44 发布 · 1.4k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

臧小川

标签

#react.js #javascript #前端 #react

收录于

react 专栏收录该内容

112 篇文章

订阅专栏

效果图

在这里插入图片描述

import { useRef, useState, useEffect } from 'react';

const index = () => {
    const [numbers, setNumbers] = useState([1, 2, 3]); // 初始数组
    // const countUpRefs = numbers.map(() => useRef()); // 根据数组长度动态创建对应数量的 ref
    const countRef = useRef([])

    useEffect(() => {
        console.log(countRef);
    }, [numbers])

    return (
        <div>
            {numbers.map((item, i) => (
                <div ref={el => countRef.current[i] = el} key={i}>{item}</div>
            ))}
            <button onClick={() => { setNumbers([...numbers, Date.now()]) }}>321</button>
        </div >
    );
}

export default index;

import { useRef, useEffect, useState } from 'react';

const index = () => {
    const [numbers, setNumbers] = useState([1, 2, 3]); // 初始数组
    const countRef = useRef([])
    countRef.current = []

    useEffect(() => {
        console.log(countRef.current);
    }, [numbers])

    return (
        <div>
            {numbers.map((item, i) => (
                <div ref={(e) => e && countRef.current.push(e)} key={i}>{item}</div>
            ))
            }
            <button onClick={() => { setNumbers([...numbers, Date.now()]) }}>aaa</button>
        </div >
    );
};

export default index;