Якорная ссылка в компоненте карты не активируется

Question

Я пишу свое первое приложение React (с использованием create-реагировать-приложение), и я написал компонент карты с использованием google-maps-реакции. Тем не менее, ссылки ниже карты не могут быть нажаты.

На самом деле, на моей веб-странице эта проблема присутствует только на экранах малого и среднего размера, в то время как она отлично работает на больших экранах (маленьких, средних и больших, как определено materializecss). Я попытался воспроизвести проблему на минимальном рабочем примере без материализации, просто используя шаблонный код, созданный `npx create-Reaction-app my-app', и добавив следующее:

MapComponent.js

import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '80vw',
  height: '45vw',
  marginLeft: 'auto',
  marginRight: 'auto',
  display: 'block'
};

const MapComponent = (props) => {
  return (
    <div className="MapComponent">
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    <Map
    google={props.google}
    zoom={10}
    style={mapStyles}
    initialCenter={{
      lat: 40,
      lng: 12
    }}
    />
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "Key"
})(MapComponent);

а затем в App.js:

import React, { Component } from 'react';
import MapComponent from './MapComponent';

class App extends Component {
  render() {
    return (
      <div className="Appr">
        <MapComponent />
      </div>
    );
  }
}

export default App;

(ключ не сообщается в примере, поэтому карты будут отображать фрейм с сообщением об ошибке, но проблема с ключом та же). Первая ссылка на google.com может быть нажата и работает, а вторая - нет. Любое решение / обходной путь?

Answer 1

Наконец, я просмотрел исходный код google-maps-реакции и нашел решение. Это очень просто, но довольно недокументировано. Помимо style Map компонент принимает containerStyle реквизит, позволяющий изменить тип упаковки контейнера Map, По умолчанию позиция установлена ​​на position: absolute давая вышеупомянутое поведение. Следующий код решает проблему для меня:

import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '80vw',
  height: '45vw',
  marginLeft: 'auto',
  marginRight: 'auto',
  display: 'block'
};

const containerStyle = {      {/* Added style */}
    position: 'static'
}

const MapComponent = (props) => {
  return (
    <div className="MapComponent">
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    <Map
    google={props.google}
    zoom={10}
    style={mapStyles}
    containerStyle={containerStyle}   {/* Added prop */}
    initialCenter={{
      lat: 40,
      lng: 12
    }}
    />
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "Key"
})(MapComponent);