如何使用 react-leaflet 打开模式？

Question

我正在尝试使用库 react-leaflet，我想在我们单击弹出窗口上的按钮时打开一个模式，但我没有做到这一点。

这是我的代码：

import React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { defaultMarker } from "./defaultMarker";
import { popupContent, popupHead, popupText, okText } from "./popupStyles";
import "./Map.css";

const center = [51.505, -0.09];

const MapComp = () => {
  return (
    <Map style={{ width: "100%", height: "100vh" }} center={center} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={center} icon={defaultMarker}>
        <Popup className="request-popup">
          <button>Open Modal</button>
        </Popup>
      </Marker>
      }
    </Map>
  );
};

export default MapComp;

你可以在那里看到完整的代码：

https://codesandbox.io/s/how-to-style-the-react-leaflet-popup-forked-7yozy?file=/src/Map.js:0-788

我只是在单击弹出窗口时打开一个模式，然后单击“打开模式”按钮

非常感谢！

Answer 1

您可以使用 react-bootstrap，其中包含 bootstrap 库或 reactstrap 的 React 组件。两者都可以更轻松地使用 bootstrap 组件，否则您将不得不创建自己的组件并自行操作状态。

这里有一个 react-bootstrap 的例子：

安装库npm i react-bootstrap

创建模态组件：

function CustomModal({ show, onClose }) {
  return (
    <Modal show={show} onHide={onClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onClose}>
          Close
        </Button>
        <Button variant="primary" onClick={onClose}>
          Save Changes
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

在您的地图上导入您的自定义模式并处理其状态以便能够在按下按钮时显示隐藏它

const MapComp = () => {
  const [show, setShow] = useState(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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={center} icon={defaultMarker}>
          <Popup className="request-popup">
            <button onClick={() => setShow(true)}>Open Modal</button>
          </Popup>
        </Marker>
      </Map>
      <Modal show={show} onClose={handleClose} />
    </>
  );
};

Demo

编辑

react-bootstrap 库似乎有错误。当您打开模式然后关闭它时，地图会意外冻结并且您无法与其交互。

我用reactstrap安装复现没有这个问题

如何使用 react-leaflet 打开模式？

How can I open a modal using react-leaflet?

javascript

leaflet

bootstrap-modal

reactjs

react-leaflet