如何在React中为组件动态添加ID以识别点击的组件

方案1：函数组件内直接生成唯一ID #

利用React的useState，优先使用组件传入的预设ID，没有的话就生成一个唯一值绑定到元素上：

import { useState } from 'react';

function MyComponent({ id }) {
  // 用时间戳+随机字符串生成唯一ID，避免重复
  const [componentId] = useState(id || `component-${Date.now()}-${Math.random().toString(36).slice(2,9)}`);

  return (
    <div id={componentId} onClick={() => console.log('点击的组件ID:', componentId)}>
      组件内容
    </div>
  );
}

方案2：封装全局ID生成器 #

如果多个组件都需要生成ID，写个全局计数器工具更高效，不会出现重复ID：

// 全局ID计数器
let idCounter = 0;
const generateUniqueId = (prefix = 'component') => {
  idCounter++;
  return `${prefix}-${idCounter}`;
};

// 组件中使用
function MyComponent({ id }) {
  const [componentId] = useState(id || generateUniqueId());

  return (
    <div id={componentId} onClick={() => console.log('点击ID:', componentId)}>
      组件内容
    </div>
  );
}

方案3：通过ref动态设置ID（适合操作DOM的场景） #

如果需要在组件挂载后再设置ID，或者使用类组件，可以用ref直接操作DOM元素：

import { useRef, useEffect } from 'react';

function MyComponent({ id }) {
  const componentRef = useRef(null);

  useEffect(() => {
    if (componentRef.current && !id) {
      // 没有传入ID时，动态生成并绑定到DOM上
      const uniqueId = `component-${Date.now()}-${Math.random().toString(36).slice(2,9)}`;
      componentRef.current.id = uniqueId;
    }
  }, [id]);

  const handleClick = () => {
    console.log('点击的组件ID:', componentRef.current.id);
  };

  return (
    <div ref={componentRef} id={id} onClick={handleClick}>
      组件内容
    </div>
  );
}

额外建议 #

别再用全局的document.addEventListener了，React组件内直接绑定onClick事件更方便，能直接拿到组件的ID，不用从DOM里额外查找。另外，用计数器生成ID比时间戳+随机数更简洁，只要是同一次应用会话里，计数器不会重复。

内容的提问来源于stack exchange，提问作者Alwaysblue