Компонент поиска по реакции на листовки не рендерится - PullRequest
Новая
       22

Компонент поиска по реакции на листовки не рендерится

0 голосов
/ 24 сентября 2019

Когда я пытаюсь выполнить поиск по запросу, я получаю сообщение об ошибке.Когда я пытаюсь использовать решение для этой ошибки, реагирует, компилируется, но компонент, кажется, не рендерится.

Я попробовал их пример Простой поиск .Получая ту же ошибку 

TypeError: Cannot read property 'map' of undefined
new ReactLeafletSearch
C:/Users/project/node_modules/react-leaflet-search/lib/React-Leaflet-Search.js:106
  103 |   });
  104 |   _this.SearchInfo = null; // searched lat,lng or response from provider
  105 | 
> 106 |   _this.map = context.map || props.leaflet.map;
      | ^  107 |   return _this;
  108 | }
  109 |

Я попробовал это решение (со страницы поиска ответной листовки) 

const searchComponent = props => (<ReactLeafletSearch position="topleft" />);

Я даже попробовал это: 

const searchComponent = withLeaflet(ReactLeafletSearch);

эти строки игнорируют «ошибку», но ни один компонент не выполняет рендеринг.

загружается мой компонент карты реакции-листовки, кнопки масштабирования +/-, но не поиск.

thisэто код, который я использую пример карты конечно, я также делаю: 

import { ReactLeafletSearch } from "react-leaflet-search";

единственная разница в том, что после строки 31 я добавляю свой компонент. 

31. </Marker>
32. <searchComponent></searchComponent>
33. </Map>

и, кажется, ничего не рендерится вообще.

Результат, который я ожидаю, - это компонент поиска, подобный показанному в этом рабочем примере

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Чтобы воспроизвести этот пример, вам необходимо:

Установить leaflet, react-leaflet, react-leaflet-search.

После этого вам нужно установить babel-polyfill, и если вы используете реагирующую брошюру v2, вы должны обернуть этот компонент методом withLeaflet.Он также задокументирован как github issue . 

const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

В методе рендеринга компонента SimpleExample примера: 

export default class SimpleExample extends Component {
   ...

     render() {
        // here wrap it
        const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

    return (
      <Map
        className="simpleMap"
        scrollWheelZoom={true}
        bounds={this.state.bounds}
        maxZoom={this.state.maxZoom}
        maxBounds={this.state.maxBounds}
      >
        <TileLayer
          noWrap={true}
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <ReactLeafletSearchComponent
          customProvider={this.provider}
          position="topleft"
          inputPlaceholder="Custom placeholder"
          search={[33.100745405144245, 46.48315429687501]}
          showMarker={true}
          zoom={5}
          showPopup={true}
          popUp={this.customPopup}
          closeResultsOnClick={true}
          openSearchOnLoad={true}
          // // these searchbounds would limit results to only Turkey.
          searchBounds={[
            [33.100745405144245, 46.48315429687501],
            [44.55916341529184, 24.510498046875]
          ]}
          // providerOptions={{region: 'tr'}}

          // default provider OpenStreetMap
          // provider="BingMap"
          // providerKey="AhkdlcKxeOnNCJ1wRIPmrOXLxtEHDvuWUZhiT4GYfWgfxLthOYXs5lUMqWjQmc27"
        />
      </Map>
    );
  }
}

Не забудьте также добавитьmap height и для импорта leaflet.css

Демо

0 голосов
/ 24 сентября 2019

Ответ kboul помог мне исправить мою проблему с компонентом поиска, не отображающимся должным образом. 

    const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

, после этого вы можете использовать «ReactLeafletSearchComponent», и компонент будет отображаться.

То, что яиспользовал другое имя для переменной.Кажется, что это в некоторой степени чувствительно к имени.(я не совсем понимаю, как много), но когда я пытаюсь использовать имя типа «searchComp», оно не будет работать, но когда я пытаюсь «ReactLeafletSearchComponent», оно работает просто отлично.

...