pga*_*lle 4 npm reactjs webpack webpack-dev-server yarnpkg
我onClick在一个非常简单的 React 函数组件中创建了一个处理程序：
export default function MyButton() {
return (
<button
onClick={() => {
console.log('test');
}}
>
Button
</button>
);
}
现在奇怪的部分是：无论我使用什么浏览器，该事件都不会触发。我已经创建了这样一个组件数百次，直到现在一切都很好。
对于其他人来说，这段代码可以正常工作。
我无法共享整个项目或示例存储库。它实际上只是一个随处可见的简单 React 应用程序。
它无法在我的系统上运行的原因可能是什么？
编辑：
错误在某种程度上是在纱线内部的。我呼吁webpack-dev-server -d source-map --mode=development开发并且我正在使用"webpack-dev-server": "^4.0.0-beta.0". 我认为缓存可能已以某种方式损坏。
npm为了解决这个问题，我删除了输出目录并使用而不是启动脚本yarn。这样，即使我yarn再次使用，它仍然有效。
我真的不知道为什么会发生这种事。很高兴知道原因。
Tan*_*kar 15
我也遇到了同样的问题，问题的原因（在我的情况下，可能是你的）是 HtmlWebpackPlugin，HtmlWebpack 插件正在 index.html 的 head 标签中添加一个捆绑的附加脚本标签。
<html>
<head>
<title>my-react-app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
<html>
<head>
<title>my-react-app</title>
<script defer src="bundle.js"></script></head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
由于这个额外的脚本标签，react 中出现了问题（我在 reddit 上读到了一篇关于这个问题的帖子，他也有同一包的多个脚本，并且他遇到了同样的问题），我通过删除我的脚本标签解决了这个问题，但是我们可以使用copywebpack插件来复制html。或者其他解决方案是配置 htmlwebpackplugin 的吸吮方式，它不会注入任何附加标签
...
new HtmlWebpackPlugin({
name: "index.html",
inject: false,
template: path.resolve(__dirname, "public/index.html"),
}),
...
| 归档时间： |
|
| 查看次数： |
8464 次 |
| 最近记录： |