时间戳

首页 > 解决方案 > 元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。- Esri 传单

javascript - 元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。- Esri 传单

问题描述

我正在做这个项目，我收到了这个错误。我还没有找到适合我的代码的解决方案。错误=

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。

它还要求我

检查 App 的渲染方法。

这是我的代码。

import { StatusBar } from 'expo-status-bar';
import React, { Component, createRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import L from 'leaflet';
import * as ELG from 'esri-leaflet-geocoder';
import { Map, TileLayer } from 'react-leaflet';



 class App extends React.Component {
  
    componentDidMount() {
      const map = this.leafletMap.leafletElement;
      const searchControl = new ELG.Geosearch().addTo(map);
      const results = new L.LayerGroup().addTo(map);
  
      searchControl.on("results", function(data) {
        results.clearLayers();
        for (let i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      });
    }
   
  render() {
    const center = [37.7833, -122.4167];
    return (
      <Map
        style={{ height: "100vh" }}
        center={center}
        zoom="10"
        ref={m => {
          this.leafletMap = m;
        }}
      >
        <TileLayer
          attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors"
          url={"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
        />
        <div className="pointer" />
      </Map>
    );
  }
}

  




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


export default App;

标签： javascriptreactjsreact-leaflet

解决方案

查看 React Leaflet 文档似乎没有Map组件。这意味着Map您的代码中的值设置为undefined导致您收到错误的值。

换成Map，MapContainer你应该很高兴。

React Leaflet 项目可能选择这个名称是为了不与 JavaScriptMap类冲突。

推荐阅读