在 react-leaflet 和 next.js 中使用 eventHandlers 的问题答案

【问题标题】：Issue using eventHandlers with react-leaflet and next.js在 react-leaflet 和 next.js 中使用 eventHandlers 的问题
【发布时间】：2023-01-02 00:32:34
【问题描述】：

我正在尝试使用eventHandlers和react-leaflet在一个next.js应用程序，但事件永远不会被触发。

这是我在我的代码中使用的代码示例Map零件：

import { MapContainer, Rectangle } from "react-leaflet";

const Map = () => {
  return (
    <MapContainer center={[25, 25]} zoom={1} style={{ height: 600, width: 600 }}>
      <Rectangle
        bounds={[
          [0, 0],
          [50, 50],
        ]}
        eventHandlers={{
          click: () => console.log("clicked.."),
        }}
      />
    </MapContainer>
  );
};

export default Map;

我试过在next.js应用程序（平面反应应用程序）并且它按预期工作，但是当我在next.js应用程序，该事件永远不会被触发。

这是我如何渲染的示例Map我的组件index.js文件：

import dynamic from "next/dynamic";

const Map = dynamic(() => import("../components/Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <Map />
    </>
  );
}

我也试过在代码箱中使用这段代码，但我无法让沙箱工作（它崩溃了）。还在https://react-leaflet.js.org/docs/example-popup-marker/ 上的实时编辑器上对其进行了测试，并将标记替换为矩形组件，单击时触发事件。

有没有其他人遇到过这个问题并找到了解决方案？

在此先感谢您的帮助！

【问题讨论】：

标签： reactjs next.js react-leaflet react-leaflet-v4

【解决方案1】：

问题

在Index.js,

dynamic() 函数用于异步加载组件，即直到需要时才加载组件。这对于优化应用程序的性能很有用，但如果在您尝试使用组件时组件未完全加载，它也可能会导致问题。

解决方案

用 Suspense 组件包装 Map 组件，这将允许您指定一个回退组件以在异步加载 Map 组件时呈现。

import dynamic from "next/dynamic";
import { Suspense } from "react";

const Map = dynamic(() => import("../components/Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Map />
    </Suspense>
  );
}

【讨论】：