如何解决使用反应传单弹出窗口为空
我正在使用 react-leaflet 并且我有这个代码:
import React,{ useState } from "react";
import { Map,TileLayer,Marker,Popup } from "react-leaflet";
import { defaultMarker } from "./defaultMarker";
import "./Map.css";
import Modal from "./Modal";
const center = [51.505,-0.09];
const MapComp = () => {
const [show,setShow] = useState(false);
function assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
const handleClose = () => setShow(false);
return (
<>
<Map style={{ width: "100%",height: "100vh" }} center={center} zoom={13}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker position={center} icon={defaultMarker}>
<Popup className="request-popup" autoPan={false} ref={popupEl => assignPopupProperties(popupEl)}>
<button onClick={() => setShow(true)}>Open Modal</button>
</Popup>
</Marker>
</Map>
<Modal show={show} onClose={handleClose} />
</>
);
};
export default MapComp;
你可以在那里看到我的代码:
问题是当我点击一个弹出窗口然后打开 Modal 我得到了 popup is null
我该怎么做才能解决这个问题?
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。