当前位置：首页 > React

react 如何获取key

2026-01-24 04:20:58React

获取 React 组件中的 key

在 React 中，key 是用于帮助 React 识别列表中哪些元素被更改、添加或删除的特殊属性。通常情况下，key 不应在组件内部直接访问，因为它主要用于 React 的虚拟 DOM 优化。但如果确实需要获取 key，可以通过以下方法实现：

通过 props 传递 key

如果 key 是作为组件的属性传递的，可以通过 props 直接访问。需要注意的是，key 不会自动作为 props 的一部分传递，需要显式传递。

function MyComponent(props) {
  console.log(props.myKey); // 显式传递的 key
  return <div>{props.myKey}</div>;
}

function ParentComponent() {
  const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
  return (
    <div>
      {items.map(item => (
        <MyComponent key={item.id} myKey={item.id} name={item.name} />
      ))}
    </div>
  );
}

通过 ref 获取 key

如果 key 是动态生成的，可以通过 ref 结合 React.Children 或 React.cloneElement 获取。

import React, { useRef, useEffect } from 'react';

function Item({ children }) {
  const childRef = useRef();

  useEffect(() => {
    if (childRef.current) {
      console.log(childRef.current.key); // 获取子组件的 key
    }
  }, []);

  return React.cloneElement(children, { ref: childRef });
}

function App() {
  return (
    <Item>
      <div key="unique-key">Child with key</div>
    </Item>
  );
}

通过列表渲染获取 key

在列表渲染时，key 通常是显式指定的，可以通过遍历直接获取。

function ListComponent() {
  const items = ['A', 'B', 'C'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item}>{item}</li> // key 是 item 的值
      ))}
    </ul>
  );
}