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

【问题标题】：React-Google-Maps component hiding other componentsReact-Google-Maps 组件隐藏其他组件
【发布时间】：2021-02-09 06:19:03
【问题描述】：

我正在尝试在我的网站上显示一个 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;

【问题讨论】：

标签： javascript reactjs react-google-maps

【解决方案1】：

知道了。

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

【讨论】：