react 如何获取key
获取 React 中组件的 key
在 React 中，key 是用于标识列表中元素的特殊属性，通常由 React 内部使用，不建议直接访问。但若需要获取 key，可以通过以下方式实现：
通过 props 传递 key
在组件内部，key 不会自动作为 props 的一部分传递。若需要访问，需显式传递：
const ListItem = ({ itemKey, data }) => {
console.log(itemKey); // 输出传递的 key
return <div>{data}</div>;
};
const List = ({ items }) => {
return items.map((item) => (
<ListItem key={item.id} itemKey={item.id} data={item.value} />
));
};使用 ref 获取子组件 key
通过 ref 可以间接获取子组件的 key，但需结合 React.Children API：
const Parent = () => {
const childRefs = useRef([]);
useEffect(() => {
console.log(childRefs.current[0].key); // 获取第一个子组件的 key
}, []);
return (
<div>
{[1, 2, 3].map((num, index) => (
<Child
key={`child-${num}`}
ref={(el) => (childRefs.current[index] = el)}
/>
))}
</div>
);
};
const Child = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({ key: props.key }));
return <div>Child</div>;
});直接访问元素属性
在事件处理或生命周期方法中，可通过 DOM 元素的 _reactInternals 属性（内部 API，不推荐生产使用）：
const handleClick = (e) => {
const key = e.target._reactInternals.key;
console.log(key); // 仅在开发环境可能有效
};注意事项
- 避免依赖 key：
key主要用于 React 的虚拟 DOM diffing 算法，业务逻辑中应避免直接使用。 - 替代方案：推荐通过
props显式传递唯一标识（如id）而非依赖key。 - 内部 API 风险：
_reactInternals是未公开的 React 内部实现，可能随版本变更失效。
如需稳定获取唯一标识，应在数据层设计唯一字段（如 id）并通过 props 传递。
