如何使用 NextJS 的动态导入将值传递给组件

Question

我在 Next.js 中动态导入时遇到问题。如果有人能给我答案或一些建议以不同的方式做到这一点，那就太好了。

问题是我有一个渲染传单地图的组件，该地图有一个指针，因此我可以单击地图并获得经度和纬度，这是代码：

import React from 'react'
import {MapContainer, Marker,TileLayer, useMapEvents } from 'react-leaflet'
import {  iconMap  } from '../../assets/customeIcon/iconMap';
import 'leaflet/dist/leaflet.css'



const MapView =({selectedPosition,setSelectedPosition}) =>{

    const [initialPosition, setInitialPosition] = React.useState([38,-101]);
    
   
    const Markers = () => {
    
        const map = useMapEvents({
            click(e) {                                
                setSelectedPosition([
                    e.latlng.lat,
                    e.latlng.lng
                ]);              
            },            
        })
    
        return (
            selectedPosition ? 
                <Marker           
                key={selectedPosition[0]}
                position={selectedPosition}
                interactive={false} 
                icon={iconMap}
                />
            : null
        )   
        
    }

    

    return  <MapContainer center={selectedPosition || initialPosition} zoom={5}  style={{height:"300px",width:"540px"}}>
        <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
         ></TileLayer>
         <Markers />
    </MapContainer>
}

export default MapView

正如您所看到的，该组件具有参数selectedPosition和setSelectedPosition。这是我保存单击位置并将其返回到父组件的位置。

例如，父组件调用地图组件的方式是这样的：

const Parent = () => {
  const [selectedPosition, setSelectedPosition] = React.useState(null);

  ...

  <MapView selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} > </MapView> 
}

这曾经工作得很好，但现在由于react-leaflet的问题，我必须使用Next.js动态导入以不同的方式调用地图，我必须创建一个如下所示的新组件：

import dynamic from 'next/dynamic';

function MapCaller() {
    const Map = React.useMemo(() =>  dynamic(
      () => import('./MapView'), 
      { ssr: false, } 
    ), []) 
    return <Map />
  }

export default MapCaller

所以现在父组件必须调用MapCaller而不是直接调用MapView：

const Parent = () => {
  const [selectedPosition, setSelectedPosition] = React.useState(null);

  ...

  <MapCaller > </MapCaller> 
}

这样我解决了react-leaflet的问题，但是我现在还有其他问题，记得我曾经将位置值传递给地图组件，我该如何用这种新方法传递这些值呢？父组件如何与地图通信以获取所选位置？还有另一种方法可以做到这一点吗？

谢谢！

Answer 1

您的<MapCaller>组件只是包装现有的<MapView>，因此您可以简单地将 props 传递给它。

const Map = dynamic(() => import('./MapView'), { ssr: false })
 
function MapCaller({ selectedPosition, setSelectedPosition }) {
    return <Map selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} />
}

然后在父组件中使用它：

const Parent = () => {
    const [selectedPosition, setSelectedPosition] = React.useState(null);
    //...
    <MapCaller selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} /> 
}