Question

我想将var income = sum {k in SKUTERY} cena[k]*prod[k]; maximize income;与NextJS（typescript）一起使用。

但是小叶剂量不支持SSR。因此，我使用Leaflet。

然后，我自定义Leaflet的标记组件。因此，我想使用react-leaflet-univarsal。我尝试了两件事。

Leaflet.Icon

找不到if(process.browser){}。

对window使用动态导入

next/dynamic

已打印。 >无法读取未定义的属性'createIcon'

是将let iconPerson: any; const DynamicComponent = dynamic( () => import('leaflet').then(L => { iconPerson = (L as any).Icon.extend({ options: { iconUrl: '/images/icon1.jpg', iconRetinaUrl: '/images/icon1.jpg', iconSize: new (L as any).Point(60, 75), className: 'leaflet-div-icon', }, }); }) as any, { ssr: false }, ); .... <Marker icon={iconPerson}>与NextJS一起使用吗？

Answer 1

动态加载实际上只针对组件，而不是库。

需要使用客户端API的库将在SSR中中断，但是有一种解决方法。

首先，像平常一样导入库并在效果中使用它。仅在安装组件后，效果才会在客户端上触发。

如果这不起作用，则可以导入效果中的库。

请注意，如果您不使用功能组件，那么componentDidMount（）也是可行的。

在这种情况下，componentDidMount（）的等效项（请参见relevant react docs on equivalents）将使用一个空数组：

useEffect(() => { /* import the library like normal here if necessary */ /* use the library here */ }, []);

有关更多信息，请参见FAQ。

Answer 2

我通过SSR Map组件解决了这个问题。

尤其是

import * as React from 'react';
import { Map as M, TileLayer, Marker, Popup } from 'react-leaflet-universal';
import L from 'leaflet';
import { Pois } from '../types/pois';

const iconPerson = new L.Icon({
  iconUrl: '/images/icon1.svg',
  iconRetinaUrl: '/images/icon1.svg',
  iconAnchor: [20, 40],
  popupAnchor: [0, -35],
  iconSize: [40, 40],
});

const MAXIMUM_ZOOM = 18;

type Props = {
  position: { lat: number; lng: number };
  pois: Pois[];
};

const Map: React.FC<Props> = ({ position, pois }) => (
  <M center={position} zoom={MAXIMUM_ZOOM} doubleClickZoom={false}>
    <TileLayer
      attribution='copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position} />
    {pois.map((poi: any) => (
      <Marker position={{ lat: poi.geo.x, lng: poi.geo.y }} icon={iconPerson} key={poi.id}>
        <Popup>{poi.description}</Popup>
      </Marker>
    ))}
  </M>
);

export default Map;

const Map: any = dynamic(() => import('./Map') as any, { ssr: false });

return <Map ... />

谢谢。

不能与NextJS一起使用Leaflet

2 个答案: