React如何获取li
获取单个或多个 <li> 元素的方法
在React中获取DOM元素（如<li>）通常通过ref实现。以下是几种常见方式：
使用useRef钩子（函数组件）
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或事件委托处理：
回调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>
);
}注意事项
- 避免过度使用
ref，优先考虑React的数据驱动特性 - 动态列表需注意
ref数组与列表同步问题 - 服务端渲染(SSR)环境下谨慎操作DOM
