来自 React 中其他组件的 Bootstrap Modal 使用

Question

这是MapContainer.js

import React, { useEffect, useState } from 'react';
import { GoogleMap, LoadScript, Marker} from '@react-google-maps/api';


const MapContainer = () => {

    const [ currentPosition, setCurrentPosition ] = useState({});
  
    const success = position => {
      const currentPosition = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
      setCurrentPosition(currentPosition);
    };
    
    useEffect (() => {
      navigator.geolocation.getCurrentPosition(success);
    })

    const mapStyles = {        
        height: "100vh",
        width: "100%"};
 
  
  return (
     <LoadScript googleMapsApiKey='AIzaSyA40-c3DnhRdFQ5In8xPdTgQSUne1UFhZI'>
       <GoogleMap mapContainerStyle={mapStyles} zoom={13} center={currentPosition}>
          {    
          currentPosition.lat &&
            ( 
              <Marker onClick={""} position={currentPosition}/> 
            )          
          } 
        </GoogleMap>
        
     </LoadScript>
  )
}

export default MapContainer;

这是ModalBootstrap.js

import { render } from '@testing-library/react';
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import MapContainer from '../MapContainer/MapContainer';


function Example() {
    const [show, setShow] = useState (false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
  
        <Modal show={show} onHide={handleClose}>
          <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={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  render (<Example />);

  export default Example;

当我点击标记 [在 MapContainer.js] 时，我想显示“模态”。我还想将纬度和经度的值从MapContainer.js 传递到 ModalBootstrap.js 。 当我点击标记时，我想传递这些数据。 当我点击标记时，会弹出一个模式，它会显示该位置的当前纬度和经度。 我已经成功实施了谷歌地图。 但是无法将值传递给 ModalBootStrap.js 并在我单击标记时显示模态。 我怎样才能做到这一点？

Answer 1

将您的模态切换为从父状态控制，而不是具有内部状态，这样就可以通过将这些状态作为道具传递给 Map 组件来控制模态show道具的状态和状态设置器。 其中一个例子是您可以让您的Example组件和MapContainer组件具有相同的父组件

export default function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const [currentPosition, setCurrentPosition] = useState({});

  return (
    <>
      <MapContainer
        currentPosition={currentPosition}
        setCurrentPosition={setCurrentPosition}
        handleShow={handleShow}
      />
      <Example
        currentPosition={currentPosition}
        show={show}
        handleClose={handleClose}
        handleShow={handleShow}
      />
    </>
  );
}

回到您的MapContainer组件，只需将其更新为对Marker的onClick道具使用handleShow道具，这样它将控制模态的打开。 至于currentPosition状态，我们也可以将这个状态向上移动，因为它也将被模态用于显示纬度和经度。

const MapContainer = ({ currentPosition, setCurrentPosition, handleShow }) => {
  ...
    return (
      <Marker onClick={handleShow} position={currentPosition} />
    )
      ...

最后，在模态上，只需根据需要使用传递的currentPosition道具来显示数据

function Example({ show, handleShow, handleClose, currentPosition }) {
  return (
    ...
    <Modal.Body>
      Latitude: {currentPosition.lat} Longitude: {currentPosition.lng}
    </Modal.Body>
    ...
  )
}