反应 onClick 未在组件上触发答案

【问题标题】：React onClick not firing on component反应 onClick 未在组件上触发
【发布时间】：2022-01-15 07:51:47
【问题描述】：

我正在将 Remix 与 React 和 TS 一起使用。我有一个名为 Map.tsx 的简单类组件，用于 index.tsx。

地图.tsx

class Map extends React.Component {
  constructor(props: any) {
    super(props);
    this.regionClicked = this.regionClicked.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={() => alert("ciao")}>a</button>
      </div>
    )
  }
}

index.tsx

import Map from "../components/index/map/Map";

class Index extends React.Component {
  constructor(props: any) {
    super(props);
  }

  render() {
    return (
      <div>
        <Map />
      </div>
    )
  }
}

【问题讨论】：

您发布的代码很好（在sandbox 中测试）。问题一定来自其他地方。

标签： node.js reactjs typescript remix.run

【解决方案1】：

已通过使用 root.tsx 文件中的 Scripts 标记进行修复。可用示例here

import { Scripts } from "remix";

function Document({ children }: { children: React.ReactNode; title?: string }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Header />
        {children}
        <Footer />
        <Scripts />
        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
      </body>
    </html>
  );
}

【讨论】：