文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的react应用无法通过CDN使用包？

问为什么我的react应用无法通过CDN使用包？
EN

Stack Overflow用户

提问于 2019-04-15 22:20:50

回答 1查看 181关注 0票数 0

我目前正在尝试使用leaflet在react中设置一个地图。我在jsfiddle中设置了地图组件和应用程序组件，一切正常(https://jsfiddle.net/myulz/8Lg4qpmf/36/ )，但当我尝试在本地运行一个非常相似的项目(组件文件夹中的MapContainer和项目根目录中的主应用程序组件)时，似乎没有加载我的cdn包，因为我收到了这个错误：

Failed to compile.

./src/components/MapContainer.js
  Line 7:   'L' is not defined         no-undef
  Line 8:   'L' is not defined         no-undef
  Line 16:  'L' is not defined         no-undef
  Line 22:  'L' is not defined         no-undef
  Line 23:  'L' is not defined         no-undef
  Line 24:  'L' is not defined         no-undef
  Line 29:  'FreeDraw' is not defined  no-undef
  Line 29:  'FreeDraw' is not defined  no-undef

为什么这些包在jsfiddle上运行良好，但不能在本地运行？

public/index.html *使用react-router，以便我的应用程序组件设置为路由，并将路由器发送到#root

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import React, { Component } from 'react';
import './App.css';
import MapContainer from './components/MapContainer'



class App extends React.Component {
  constructor(props) {
    super(props)

  }

  render() {
    return (
      <div>
        <MapContainer/>
      </div>
    )
  }
}

export default App;

import React from 'react';
import '../style.css';

class MapContainer extends React.Component {
  componentDidMount() {
      // create map
      var map = L.map('map', {
          center: new L.LatLng(38.898584, -77.020940),
          zoom: 10,
          maxBounds: bounds,
          minZoom: 4
      });

      var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {
          minZoom: 0,
          maxZoom: 18,
          attribution: osmAttrib
      });

      var bounds = L.latLngBounds(
             L.latLng(5.499550, -167.276413), //Southwest
             L.latLng(83.162102, -52.233040)  //Northeast
         );


      map.addLayer(osm);
      const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
            map.addLayer(freeDraw);

    }

  render() {
    return <div id="map"></div>
  }
}

export default MapContainer;

reactjs

leaflet

cdn

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-15 22:29:01

您应该使用window.L和window.FreeDraw，而不是L和FreeDraw

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55691272

复制

相似问题

问为什么我的react应用无法通过CDN使用包？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的react应用无法通过CDN使用包？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的react应用无法通过CDN使用包？
EN