React如何获取li
获取 DOM 中的 <li> 元素
在 React 中获取 <li> 元素可以通过以下几种方式实现：
使用 ref 获取单个 <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> 元素
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>
);
}注意事项
- 直接操作 DOM 不是 React 推荐的做法，应优先考虑使用状态管理
- 使用
ref时注意清理工作以避免内存泄漏 - 动态列表中使用
ref回调时要确保引用稳定性 - 事件委托可能是比单独绑定更高效的方案
