React如何获取li

获取单个 <li> 元素

在 React 中，可以通过 ref 直接获取 DOM 元素。使用 useRef 钩子创建引用，并将其绑定到目标 <li> 元素上。

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(liRef.current.textContent); // 输出 li 的文本内容
  };

  return (
    <ul>
      <li ref={liRef} onClick={handleClick}>
        点击获取内容
      </li>
    </ul>
  );
}

获取多个 <li> 元素列表

当需要操作多个 <li> 元素时，可以使用 querySelectorAll 或动态绑定 ref 的方式。推荐通过父元素获取子节点列表。

import React, { useRef } from 'react';

function ListItems() {
  const ulRef = useRef(null);

  const handleClick = () => {
    const lis = ulRef.current.querySelectorAll('li');
    lis.forEach(li => console.log(li.textContent));
  };

  return (
    <ul ref={ulRef}>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </ul>
  );
}

动态渲染列表时获取元素

通过 map 渲染动态列表时，可为每个 <li> 创建独立的 ref 并存入数组。

import React, { useRef } from 'react';

function DynamicList() {
  const items = ['A', 'B', 'C'];
  const liRefs = useRef([]);

  const handleClick = (index) => {
    console.log(liRefs.current[index].textContent);
  };

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

事件委托方式获取目标 <li>

通过事件冒泡机制，从父元素事件中通过 event.target 获取实际点击的 <li> 元素。

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

  return (
    <ul onClick={handleClick}>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  );
}

注意事项

• 避免过度使用 ref 直接操作 DOM，优先考虑 React 的状态管理
• 动态列表的 ref 数组需要正确处理索引，防止内存泄漏
• 服务端渲染场景下，直接 DOM 操作可能引发错误