Question

在我的 react 应用程序在使用 create-react-app 内置配置时崩溃后，我改用 webpack v5，一切正常，但我注意到所有 onClick 功能都不起作用，这里是 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="coneve-logo.png" />
    <meta
      name="description"
      content="a bio cosmitics e-commerce store | Coneve"
    />
    <link rel="apple-touch-icon" href="coneve-logo.png" />
    <title>Coneve | bio-cosmitics brand</title>
  
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

这里是 webpack.config.js。

const path = require("path");
const InterpolateHtmlPlugin = require("interpolate-html-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: "./index.js",
  
  target: "node",
  devServer: {
    port: "9500",
    contentBase: ["./public"],
    open: true,
    historyApiFallback: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new InterpolateHtmlPlugin({
      PUBLIC_URL: "static", // can modify `static` to another name or get it from `process`
    }),
    new HtmlWebpackPlugin({
      // injects bundle.js to our new index.html
      inject: true,
      // copys the content of the existing index.html to the new /build index.html
      template: path.resolve("./public/index.html"),
    }),
  ],
};

这里是 Appbar.js（例如）：

import { NavLink, Link } from "react-router-dom";
import React from "react";
import ConeveLogo from "../assets/coneve-logo.png";
import { Drawer, List, ListItem, Divider } from "@material-ui/core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as icons from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import Contactbar from "./Contactbar";

import styled from "styled-components";
import Collectionbar from "./Collectionbar";

const NavItems = styled.ul`
  display: flex;
  align-items: center;
  transition: 0.3s ease;
  margin-right: 10%;
  li {
    padding: 1vmax;
    margin: 0.5vmax;
    &:hover {
      color: #00380a;
    }
  }
  @media (max-width: 600px) {
    display: none;
  }
`;

const Nav = styled.nav`
  display: flex;
  align-items: center;
  justify-content: space-between;

  box-shadow: 0.1em 0.1em 0.1em grey;
`;

function Appbar() {
  const [toggle, setToggle] = useState(false);
  const handleToggle = (value) => {
    setToggle(value);
  };

  return (
    <>
      <div className="container">
        <Contactbar />
        <Nav>
          <div className="logo flex">
            <img src={ConeveLogo} alt="" />
            <h1>Coneve</h1>
          </div>
          <NavItems className="nav">
            <li>
              <NavLink to="/">Home</NavLink>{" "}
            </li>
            <li>
              <NavLink to="/products">Products</NavLink>{" "}
            </li>
            <li>
              <NavLink to="/cart">
                <FontAwesomeIcon icon={icons.faCartPlus} />
              </NavLink>
            </li>
          </NavItems>
          <div className="mobile-nav" style={{ marginRight: "15%" }}>
            <FontAwesomeIcon
              onClick={() => handleToggle(true)}
              size="2x"
              icon={icons.faBars}
            />
          </div>

          <Drawer
            anchor="right"
            open={toggle}
            onClose={() => handleToggle(false)}
          >
            <div className="flex-space">
              <NavLink to="/cart">
                <FontAwesomeIcon size="lg" icon={icons.faCartPlus} />
              </NavLink>
            </div>
            <Divider orientation="horizontal"></Divider>
            <List onClick={() => handleToggle(false)}>
              <ListItem>
                <Link to="/">Home</Link>
              </ListItem>
              <ListItem>
                <Link to="/products">Products</Link>
              </ListItem>
            </List>
          </Drawer>
        </Nav>
        <Collectionbar />
      </div>
    </>
  );
}

我检查了浏览器中的 html，发现每个事件都附加了一个 noop 函数。这是一个屏幕截图： noop function

反应不附加事件侦听器

0 个答案: