react-leaflet-search 组件未呈现答案

【问题标题】：react-leaflet-search component not renderingreact-leaflet-search 组件未呈现
【发布时间】：2020-03-07 16:49:54
【问题描述】：

当我尝试渲染 react-leaflet-search 时，出现错误。当我尝试使用该错误的解决方案时，反应正在编译，但组件似乎没有呈现。

我尝试了他们的示例simple search。得到同样的错误

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 |

我尝试了这个解决方案（来自 react-leaflet-search 页面）

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

我什至试过这个：

const searchComponent = withLeaflet(ReactLeafletSearch);

这些行绕过了“错误”，但似乎没有组件正在渲染。

我的 react-leaflet 地图组件正在加载，缩放 +/- 按钮也是如此，但不是搜索。

这是我正在使用的代码 map example 当然我也在做：

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

唯一的区别是在第 31 行之后我添加了我的组件。

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

似乎什么都没有渲染。

我期望的结果是一个像这里显示的搜索组件 working example

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet react-leaflet-search

【解决方案1】：

要重现this 示例，您需要：

安装leaflet、react-leaflet、react-leaflet-search。

之后，你需要安装babel-polyfill，如果你使用react-leaflet v2，你应该用withLeaflet方法包装这个组件。它也被记录为 github issue。

const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

在example的SimpleExample组件的render方法中：

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

Demo

【讨论】：

【解决方案2】：

kboul 的回答帮助我解决了搜索组件无法正确呈现的问题。

    const ReactLeafletSearchComponent = withLeaflet(ReactLeafletSearch);

之后你可以使用“ReactLeafletSearchComponent”，组件就会渲染出来。

我为变量使用了不同的名称。它似乎在一定程度上对名称敏感。（我不完全了解多少）但是当我尝试使用“searchComp”之类的名称时它不起作用，但是当我尝试使用“ReactLeafletSearchComponent”时它工作得很好。

【讨论】：