当前位置：首页 > React

React如何获取li

2026-02-26 07:12:31React

获取单个或多个 `<li>` 元素的方法

在React中获取DOM元素（如<li>）通常通过ref实现。以下是几种常见方式：

使用useRef钩子（函数组件）

React如何获取li

import React, { useRef } from 'react';

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

  useEffect(() => {
    if (liRef.current) {
      console.log(liRef.current.textContent);
    }
  }, []);

  return (
    <ul>
      <li ref={liRef}>First Item</li>
    </ul>
  );
}

获取列表中的所有<li>元素

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

  useEffect(() => {
    if (listRef.current) {
      const allLi = listRef.current.querySelectorAll('li');
      allLi.forEach(li => console.log(li.textContent));
    }
  }, []);

  return (
    <ul ref={listRef}>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  );
}

动态列表中的元素获取

对于动态生成的列表，可通过回调ref或事件委托处理：

React如何获取li

回调ref方式

function DynamicList({ items }) {
  const liRefs = useRef([]);

  useEffect(() => {
    liRefs.current.forEach(ref => {
      if (ref) console.log(ref.textContent);
    });
  }, [items]);

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

事件处理替代方案

如果只需要交互响应，事件委托可能更高效：

function ClickableList() {
  const handleClick = (e) => {
    if (e.target.tagName === 'LI') {
      console.log(e.target.textContent);
    }
  };

  return (
    <ul onClick={handleClick}>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  );
}