从React中的其他组件使用Bootstrap Modal

如何解决从React中的其他组件使用Bootstrap Modal

这是 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并显示Modal。我该怎么办？

解决方法

将模态从父状态控制为不具有内部状态，从而使模态show道具的状态和状态设置器可以通过将这些状态作为道具传递到Map Component进行控制。例如，您可以将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组件，只需对其进行更新，以将handleShow的{​​{1}}道具使用onClick道具，那么它将控制模态的打开。至于Marker状态，我们也可以将该状态上移，因为模态还将使用此状态来显示纬度和经度。

currentPosition

最后，在模态上，只需使用传递的const MapContainer = ({ currentPosition,setCurrentPosition,handleShow }) => { ... return ( <Marker onClick={handleShow} position={currentPosition} /> ) ... 道具即可根据需要显示数据

currentPosition