React函数组件绑定的onClick点击事件不触发，调试发现调用走入react-dom的noop空函数

所有异常和你写的NavBar组件逻辑无关，问题完全出在你自定义的DOM挂载流程上。

原理链路 #

React 17之后的合成事件系统，不会把onClick这类回调直接绑定到对应的DOM元素上，而是把所有事件代理统一挂载在当前React树的根渲染容器对应的DOM节点上。
你当前的操作流程直接打断了这个事件链路：

• 先新建一个游离在真实文档流外的temp空div，作为render方法的挂载容器，此时React会把全局事件代理绑定在这个temp节点上
• 把NavBar组件渲染到temp容器内，生成对应的DOM节点
• 渲染完成后，把temp容器内部的#nav-wrap节点单独抠出来，替换到页面原有的导航位置——相当于把需要触发事件的DOM元素，从已经绑定了事件代理的temp容器里直接剪走了

这就造成了完整的故障闭环：

1. 你最终挂到页面上的导航节点，本身没有任何React事件监听
2. 原本绑定了事件代理的temp节点，因为从来没有被插入到真实文档流，永远收不到从页面元素冒泡上来的点击事件
3. 当React尝试解析组件上的onClick回调时，因为找不到正确的事件宿主上下文，就会回退到内置的noop空函数，这也是你断点调试时看到空函数的原因。

你之前排查的元素遮挡问题确实不是诱因：真实DOM层面的点击事件能正常传播，但是这个传播链路根本触达不到React的事件代理层，自然永远不会执行你写的toggle函数。
两个你观察到的辅助现象也完全匹配这个故障逻辑：

• 为什么把onClick换成立即执行的函数能正常运行？因为那个逻辑是在组件渲染阶段直接执行的，根本不依赖事件触发链路
• 为什么React DevTools能看到绑定的事件？因为React的组件树状态存在内存中，只要render方法执行过，DevTools就能读到对应的props，哪怕DOM和组件树的关联已经被你剪坏了。

修复方案 #

完全不需要新建临时容器抠DOM节点，直接把页面原有的#nav-wrap节点作为React的渲染挂载目标即可：

ready(() => {
    const wrap = document.getElementById('nav-wrap');
    if (wrap) {
        // 直接使用现有节点作为React的挂载根，保留完整的事件代理链路
        render(<NavBar />, wrap);
    }
});

如果确实需要保留原有节点上的非React逻辑，也必须保证React渲染的根容器完整挂入真实文档流，绝对不能只把组件输出的子节点抠出来单独使用。

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