react如何获取列表的dom

获取列表 DOM 的方法

在 React 中获取列表的 DOM 元素可以通过 ref 实现。以下是几种常见方法：

使用 useRef 钩子获取单个元素

import { useRef } from 'react';

function ListComponent() {
  const listRef = useRef(null);

  useEffect(() => {
    console.log(listRef.current); // 获取整个列表的 DOM
  }, []);

  return (
    <ul ref={listRef}>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

获取列表项元素的集合

import { useRef } from 'react';

function ListComponent() {
  const itemRefs = useRef([]);

  useEffect(() => {
    itemRefs.current.forEach(ref => console.log(ref));
  }, []);

  return (
    <ul>
      {items.map((item, index) => (
        <li 
          key={item.id}
          ref={el => itemRefs.current[index] = el}
        >
          {item.text}
        </li>
      ))}
    </ul>
  );
}

使用回调 ref 动态获取元素

function ListComponent() {
  const handleRef = (element, index) => {
    if (element) {
      console.log(`Item ${index}:`, element);
    }
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li 
          key={item.id}
          ref={el => handleRef(el, index)}
        >
          {item.text}
        </li>
      ))}
    </ul>
  );
}

注意事项

• 当列表动态变化时，需要清理或更新 ref 引用
• 避免在渲染过程中直接操作 DOM
• 对于大量列表项，考虑使用虚拟滚动技术优化性能