React-Google-Maps组件隐藏其他组件

Question

我正在尝试让一个react-google-map组件出现在我的网站上，以及我的导航栏和页脚组件。然而，地图使我的页面上的所有东西都消失了。如何才能使地图显示在我的。

我最初使用一个组件导出了displayMap()函数和WrappedMap，但在关闭标记时遇到了重新渲染地图的问题。

//Map.js

import React, { useState } from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps';
import * as schools from '../data/schools.json';

function Display() {
    const [selectedSchool, setSelectedSchool] = useState(null)

    function displayMap() {
        return (
            <div className="wrapper">
                <GoogleMap defaultZoom={3} defaultCenter={{ lat: 50, lng: -50 }}
                </GoogleMap>
            </div>
        );
    };
};

const Map = (props) => {
    const WrappedMap = withScriptjs(withGoogleMap(Display));

    return (
        <WrappedMap
            googleMapURL=mapsURL
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />} />
    );
};

export default Map;

//Education.js
import React, { useEffect } from 'react';
import Map from '../components/Map';
import ContactFooter from '../components/ContactFooter';
import Navbar from '../components/Navbar';

const Education = (props) => {

    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    return (
        <>
            <Navbar />
            <main className="education">
                {/* <Map /> */}
            </main>
            <footer>
                <ContactFooter />
            </footer>
        </>
    );
};

export default Education;

Answer 1

明白了。

需要删除行函数displayMap()，只使用display()