Как правильно работать с библиотекой «реагировать-листовка» в приложении реакции, созданном с помощью «создать-реагировать-приложение»?

у меня возникают проблемы с библиотекой 'react-leaflet', когда я пытаюсь создать простой компонент карты внутри реагирующего приложения, созданного с помощью библиотеки 'create-react-app', с ни машинописи, ни потока.

следующий код представляет собой простой компонент карты, использующий 'react-leaflet' с простым html и node_modules, я не могу воспроизвести его внутри проекта 'create-react-app' .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React-Leaflet UMD example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="/node_modules/react-leaflet/dist/react-leaflet.min.js"></script>
    <style>
      body {
        padding: 20px;
      }
      .leaflet-container {
        height: 400px;
        width: 80%;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" data-presets="es2015,react">
    const React = window.React
const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet
const position = [51.505, -0.09]
const Example = () => (
  <LeafletMap center={position} zoom={13}>
    <TileLayer
      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        <span>
          A pretty CSS3 popup. <br /> Easily customizable.
        </span>
      </Popup>
    </Marker>
  </LeafletMap>
)
window.ReactDOM.render(<Example />, document.getElementById('container'))
</script>
  </body>
</html>

Заранее спасибо.


reactjs create-react-app leaflet react-leaflet
person Kevin Román Oca Sierra    schedule 05.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это (возможно) должно быть правильным способом показать компонент карты реакции-листовки в модульном и структурированном проекте, подобном этому.

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';

class App extends Component {

  render() {

    return (

      <div className="map">
        <Map center={[51.505, -0.09]} zoom={13} className="map__reactleaflet">
          <TileLayer
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
          />
        </Map>
      </div>

    )

  }

}

export default App;

'TileLayer' абсолютно необязателен, этот компонент не нужен для рендеринга карты, но он необходим для отображения тайлов на нем, это значит, что вы можете рендерить холст со шнурами как хотите , с маркерами, линиями, многоугольниками или вообще без ничего, вам просто нужно импортировать этот компонент из библиотеки 'react-leaflet'

Если вы найдете другое или лучшее решение, поделитесь им, спасибо!

person Kevin Román Oca Sierra    schedule 05.07.2018