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

我对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

这过去工作得很好，但现在由于react传单的问题，我不得不以不同的方式调用地图，使用Next.js dynamic import，我必须创建一个新组件，如下所示：

import dynamic from 'next/dynamic';

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

export default MapCaller

通过这个，我解决了react传单的问题，但现在我有了其他问题，还记得我曾经将位置值传递给map组件，我如何使用这种新方法传递该值？父组件如何与地图通信以获取所选位置？有没有其他方法可以做到这一点

谢谢

您的

组件只是简单地包装现有的

，因此您可以简单地将道具传递给它

函数映射调用者（{selectedPosition，setSelectedPosition}）{
const Map=React.useMoom（（）=>动态(
（）=>导入（'./MapView'），
{ssr:false，}
), []) 
返回
}

然后在父组件中使用它：

const Parent=（）=>{
常量[selectedPosition，setSelectedPosition]=React.useState（null）；
//...
}

非常感谢您的回答，它成功了！

import dynamic from 'next/dynamic';

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

export default MapCaller

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

  ...

  <MapCaller > </MapCaller> 
}