React17+Webpack5环境下函数组件内部onClick事件不触发问题排查

核心原因 #

这个问题是重复加载了两份独立的React/ReactDOM实例导致的，和Webpack配置直接相关。

React 17对事件委托机制做了调整，不再把事件绑定到全局document节点，而是绑定到ReactDOM.render挂载的根DOM节点（你代码中的#impact节点），且事件监听逻辑和React实例强绑定：

• 你在HTML中通过CDN引入了UMD版本的React和ReactDOM，生成了全局window.React、window.ReactDOM实例
• 若Webpack未配置externals排除React、ReactDOM依赖，项目代码中import的React会被直接打包进输出的bundle文件，形成第二份独立的React实例

你定义的函数组件App是用bundle中打包的React实例创建的，它的onClick事件只会被该实例的事件系统监听；而你调用ReactDOM.render用的是CDN引入的全局ReactDOM实例，两个实例的事件系统完全隔离，因此App内部的点击事件无法触发。
直接写在ReactDOM.render里的内联模板是用全局React实例创建的，所以事件可以正常执行。

验证方法 #

在App组件代码和ReactDOM.render执行代码中分别添加console.log(React === window.React)，如果输出为false即可确认是多实例问题。

解决方案 #

二选一即可：

1. 配置Webpack排除React依赖
   在webpack.config.js中添加externals配置，告诉Webpack React和ReactDOM使用全局变量，不需要打包进bundle：

module.exports = {
  // 其他原有配置保持不变
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
}

2. 移除HTML中的CDN引入
   删掉HTML中两个React相关的script标签，所有React依赖都使用项目npm安装的版本，由Webpack统一打包，保证仅存在一份实例。

其他小概率排查点 #

如果排除多实例问题后仍未解决，检查Babel配置是否匹配React 17的自动JSX转译要求：

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

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