如何使用 NextJS 的動態導入將值傳遞給組件

Question

我在 Next.js 中的動態導入有問題。 如果有人能給我一個答案或一些建議以不同的方式做到這一點，那就太好了。

問題是我有一個渲染傳單地圖的組件，這個 map 有一個指針，所以我可以點擊 map 並有經度和緯度，這是代碼：

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 。 這是我保存單擊的 position 並將其返回給父組件的地方。

例如，父組件曾經這樣調用 map 組件：

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

  ...

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

這曾經很好用，但現在由於 react-leaflet 的問題，我必須以不同的方式調用 map，使用 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 的問題，但我現在有其他問題，請記住我曾經將 position 值傳遞給 map 組件，我該如何使用這種新方法傳遞這些值？ 父組件如何與 map 通信以獲取選定的 position？ 還有另一種方法可以做到這一點嗎？

謝謝！

Answer 1

您的<MapCaller>組件只是包裝現有的<MapView> ，因此您可以簡單地將道具傳遞給它。

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} /> 
}