來自 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>
    ...
  )
}