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

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

0 голосов
/ 29 декабря 2018

Я пишу свое первое приложение 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 может быть нажата и работает, а вторая - нет.Любое решение / обходной путь?

1 Ответ

0 голосов
/ 29 декабря 2018

Наконец, я просмотрел исходный код 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);
...