react 如何获取key
获取 React 中元素的 key
在 React 中，key 是用于优化列表渲染的特殊属性，通常不会直接在组件内部访问。但可以通过以下方式间接获取或利用 key。
通过 props 传递 key
将 key 作为其他属性（如 id）传递给组件，从而在组件内部访问：
const ListItem = ({ id, content }) => {
// 通过 id（即原来的 key）访问
console.log(id);
return <div>{content}</div>;
};
const List = () => {
const items = [{ id: 1, content: "Item 1" }, { id: 2, content: "Item 2" }];
return items.map(item => (
<ListItem key={item.id} id={item.id} content={item.content} />
));
};使用 ref 获取 DOM 元素的 key
通过 ref 可以访问 DOM 节点，但需注意 key 不会出现在 DOM 属性中。若需获取，需将 key 存储为 data-* 属性：
const Item = ({ item }) => {
const ref = useRef();
useEffect(() => {
console.log(ref.current.dataset.key); // 通过 data-key 获取
}, []);
return <div ref={ref} data-key={item.id}>{item.text}</div>;
};在事件处理中获取 key
通过事件对象或自定义属性传递 key：
const handleClick = (e) => {
console.log(e.currentTarget.dataset.key); // 从 data-key 获取
};
const items = ["A", "B", "C"].map((item, index) => (
<button key={index} data-key={index} onClick={handleClick}>
{item}
</button>
));注意事项
- React 不会将
key作为 props 传递给组件，直接通过props.key获取会得到undefined。 - 若需操作
key，建议将其作为显式属性（如id）传递。 key的主要用途是优化渲染性能，而非业务逻辑处理。
