当前位置：首页 > React

React如何获取li

2026-02-11 21:13:44React

获取 DOM 中的 `<li>` 元素

在 React 中获取 <li> 元素可以通过以下几种方式实现：

使用 ref 获取单个 <li> 元素

React如何获取li

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

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

  useEffect(() => {
    if (liRef.current) {
      console.log(liRef.current); // 获取到的 li 元素
    }
  }, []);

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

使用 querySelectorAll 获取所有 <li> 元素

React如何获取li

import React, { useEffect } from 'react';

function ListComponent() {
  useEffect(() => {
    const listItems = document.querySelectorAll('li');
    console.log(listItems); // NodeList 包含所有 li 元素
  }, []);

  return (
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  );
}

通过事件处理程序获取 <li> 元素

function ListComponent() {
  const handleClick = (e) => {
    console.log(e.target); // 点击的 li 元素
  };

  return (
    <ul>
      <li onClick={handleClick}>Item 1</li>
      <li onClick={handleClick}>Item 2</li>
    </ul>
  );
}

动态渲染列表时获取特定 <li> 元素

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

  useEffect(() => {
    console.log(itemRefs.current); // 所有 li 元素的数组
  }, []);

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