gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 18:57:27 30 4
gpt4 key购买 nike

我在 Next.js 中遇到动态导入问题。如果有人能给我一个答案或一些建议以不同的方式做到这一点,那就太好了。
问题是我有一个渲染传单 map 的组件,这张 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
如您所见,该组件具有参数 selectedPositionsetSelectedPosition .这是我保存点击位置并将其返回给父组件的地方。
比如父组件以前是这样调用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 的问题,但我现在还有其他问题,请记住我曾经将位置值传递给 map 组件,我该如何使用这种新方法传递这些值?父组件如何与 map 通信以获取所选位置?有没有另一种方法可以做到这一点?
谢谢!

最佳答案

您的 <MapCaller>组件只是简单地包装了现有的 <MapView> ,所以你可以简单地将 Prop 传递给它。

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

关于reactjs - 如何使用 NextJS 的动态导入将值传递给组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65562677/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com