React如何获取li
React 获取 li 元素的方法
在 React 中获取 li 元素可以通过多种方式实现，以下是几种常见的方法：
使用 ref 直接获取 DOM 元素
通过 useRef 钩子可以直接获取 li 元素的 DOM 节点。这种方式适用于需要直接操作 DOM 的场景。
import React, { useRef } from 'react';
function ListComponent() {
const liRef = useRef(null);
const handleClick = () => {
console.log(liRef.current); // 获取 li 元素的 DOM 节点
};
return (
<ul>
<li ref={liRef} onClick={handleClick}>Item 1</li>
</ul>
);
}通过事件对象获取目标元素
在事件处理函数中，可以通过事件对象的 target 或 currentTarget 属性获取触发事件的 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 并获取特定元素
当动态生成多个 li 元素时，可以通过传递索引或唯一标识符来获取特定的 li 元素。
function ListComponent() {
const items = ['Item 1', 'Item 2', 'Item 3'];
const handleClick = (index) => {
console.log(`Clicked item at index ${index}`);
};
return (
<ul>
{items.map((item, index) => (
<li key={index} onClick={() => handleClick(index)}>
{item}
</li>
))}
</ul>
);
}使用 ref 回调获取多个 li 元素
如果需要获取多个 li 元素的引用，可以使用 ref 回调函数将每个 li 的引用存储到一个数组中。
import React, { useState } from 'react';
function ListComponent() {
const [liRefs, setLiRefs] = useState([]);
const setRef = (ref) => {
if (ref) {
setLiRefs((prevRefs) => [...prevRefs, ref]);
}
};
const handleClick = () => {
console.log(liRefs); // 获取所有 li 元素的引用
};
return (
<div>
<ul>
<li ref={setRef}>Item 1</li>
<li ref={setRef}>Item 2</li>
</ul>
<button onClick={handleClick}>Log Refs</button>
</div>
);
}使用第三方库（如 React-Ref）
某些第三方库（如 react-ref）提供了更高级的 ref 管理功能，可以简化多个 ref 的操作。
import { useRefs } from 'react-refs';
function ListComponent() {
const { refs, setRef } = useRefs();
const handleClick = () => {
console.log(refs); // 获取所有 li 元素的引用
};
return (
<div>
<ul>
<li ref={setRef('li1')}>Item 1</li>
<li ref={setRef('li2')}>Item 2</li>
</ul>
<button onClick={handleClick}>Log Refs</button>
</div>
);
}以上方法可以根据具体需求选择使用。如果需要直接操作 DOM，推荐使用 useRef；如果只是需要获取事件触发的元素，可以通过事件对象实现；动态生成多个元素时，可以使用索引或 ref 回调来管理。
