如何将函数分配给React中另一个组件的按钮？
如何将函数分配给React中另一个组件的按钮？
提问于 2021-10-09 18:15:43
我有一个Map组件，我在其中创建了一个函数来获取用户的当前位置。我已经将这个映射组件导入到一个更大的RetailLocations组件中。我想将在Map组件中创建的handleClick()函数分配给RetailLocations组件中的一个按钮。相关代码：
Map Component code:
const [center, setCenter] = useState({ lat: 0, lng: 0 });
const location = useGeoLocation();
const mapRef = useRef();
const ZOOM_LEVEL = 20;
const handleClick = (e) => {
if (location.loaded) {
mapRef.current.leafletElement.flyTo(
[location.coordinates.lat, location.coordinates.lng],
ZOOM_LEVEL,
{ animate: true }
);
}
};
return <>
<MapContainer
center={center}
zoom={ZOOM_LEVEL}
ref={mapRef}
scrollWheelZoom={false}
className={style.mapContainer}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
{location.loaded && (
<Marker position={[ location.coordinates.lat, location.coordinates.lng ]}></Marker>
)}
</MapContainer>
</>;
};
export default Map;This is the RetailLocations component's relevant code:
import Map from './Map';
....
<button
className={style.locationBtn}
onClick={handleClick}
>My Location</button>
....我还漏掉了什么吗？
Stack Overflow用户
发布于 2021-10-09 18:49:15
使用forwardRef和useImperativeHandle挂钩来访问功能组件内部的方法。
Map组件：
import { forwardRef, useImperativeHandle } from 'react'
const Map = forwardRef((props, ref) => {
...
const handleClick = (e) => {
if (location.loaded) {
mapRef.current.leafletElement.flyTo(
[location.coordinates.lat, location.coordinates.lng],
ZOOM_LEVEL,
{ animate: true }
);
}
};
useImperativeHandle(
ref,
() => ({ handleClick }),
[handleClick]
);
return <>
<MapContainer
center={center}
zoom={ZOOM_LEVEL}
ref={mapRef}
scrollWheelZoom={false}
className={style.mapContainer}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
{location.loaded && (
<Marker position={[ location.coordinates.lat, location.coordinates.lng ]}></Marker>
)}
</MapContainer>
</>;
})RetailLocations组件：
import Map from './Map';
import { useRef } from 'react';
....
const RetailLocations = () => {
const ref = useRef()
return <>
<Map ref={ref} />
<button
className={style.locationBtn}
onClick={(e) => ref.current.handleClick(e)}>
My Location
</button>
</>
}
....页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69509429
复制相关文章
相似问题
腾讯云开发者
