React中如何判断元素绑定onClick？求通用标记实现方案

问题背景 #

需要在根容器的点击处理器rootHandler中，仅追踪绑定了onClick事件的元素的点击行为（如示例中的App3），未绑定onClick的元素（App1、App2）不触发追踪。当前实现需在每个点击处理器中手动添加e.hasBindOnClick = true标记，项目中这类处理器数量众多，维护成本高，需要通用解决方案。

现有代码（需优化） #

export default function App() {
  const rootHandler = (e) => {
    if (e.hasBindOnClick) {
      console.log("track", e.target.textContent);
    }
  };

  const click3 = (e) => {
    e.hasBindOnClick = true;
    console.log("click3", e);
  };

  return (
    <div className="root" onClick={rootHandler}>
      <div className="App1">App1</div>
      <div className="App2">App2</div>
      <div className="App3" onClick={click3}>
        App3
      </div>
    </div>
  );
}

解决方案1：封装高阶函数统一添加标记 #

写一个通用的包装函数，自动给所有点击处理器的事件对象添加追踪标记，无需手动修改每个处理器：

export default function App() {
  // 通用包装函数：自动为点击事件添加追踪标记
  const withTrackMarker = (handler) => {
    return (e) => {
      e.hasBindOnClick = true;
      // 执行原处理器逻辑
      handler?.(e);
    };
  };

  const rootHandler = (e) => {
    if (e.hasBindOnClick) {
      console.log("track", e.target.textContent);
    }
  };

  // 用包装函数包裹原点击处理器
  const click3 = withTrackMarker((e) => {
    console.log("click3", e);
  });

  // 新增的点击处理器直接复用包装函数
  const click4 = withTrackMarker((e) => {
    console.log("click4", e);
  });

  return (
    <div className="root" onClick={rootHandler}>
      <div className="App1">App1</div>
      <div className="App2">App2</div>
      <div className="App3" onClick={click3}>
        App3
      </div>
      <div className="App4" onClick={click4}>
        App4
      </div>
    </div>
  );
}

优势：无需修改现有组件结构，仅需对点击处理器做一层包装，适合已有大量处理器的存量项目。

解决方案2：自定义可追踪点击组件 #

创建一个自定义组件，替代原生的点击元素，内部自动处理标记逻辑：

// 自定义可追踪点击组件
const TrackableClick = ({ onClick, children, ...props }) => {
  const handleClick = (e) => {
    e.hasBindOnClick = true;
    onClick?.(e);
  };
  return <div {...props} onClick={handleClick}>{children}</div>;
};

export default function App() {
  const rootHandler = (e) => {
    if (e.hasBindOnClick) {
      console.log("track", e.target.textContent);
    }
  };

  const click3 = (e) => {
    console.log("click3", e);
  };

  return (
    <div className="root" onClick={rootHandler}>
      <div className="App1">App1</div>
      <div className="App2">App2</div>
      {/* 使用自定义组件代替原生div */}
      <TrackableClick className="App3" onClick={click3}>
        App3
      </TrackableClick>
    </div>
  );
}

优势：组件化规范点击元素的使用，新开发模块直接用该组件即可，避免遗漏标记，适合新项目或重构场景。

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