为什么我无法在我的 React 应用程序中通过 CDN 使用包？

Question

我目前正在尝试使用传单在 React 中设置地图。我在 jsfiddle 中设置了我的地图组件和应用程序组件，一切正常（https://jsfiddle.net/myulz/8Lg4qpmf/36/ )，但是当我尝试在本地运行一个非常相似的项目（组件文件夹中的 MapContainer 和项目根目录中的主要 App 组件）时，似乎我的 cdn 包中的 none 在收到此消息时正在加载错误：

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;

Answer 1

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

为什么我无法在我的 React 应用程序中通过 CDN 使用包？

Why am I unable to use packages via CDN in my react app?

cdn

leaflet

reactjs