文章/答案/技术大牛

发布

社区首页 >问答首页 >在用“创建-反应-应用程序”制作的react应用程序中，使用“react传单”库的正确方法是什么？

问在用“创建-反应-应用程序”制作的react应用程序中，使用“react传单”库的正确方法是什么？
EN

Stack Overflow用户

提问于 2018-07-05 12:49:48

回答 1查看 919关注 0票数 2

当我试图在一个用'react-leaflet'库制作的react应用程序中创建一个简单的地图组件时，我遇到了'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

leaflet

create-react-app

react-leaflet

回答 1

Stack Overflow用户

发布于 2018-07-05 15:45:37

这(也许)应该是在这样一个模块化和结构化的项目中显示react传单映射组件的正确方式。

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'绝对是可选的，您不需要这个组件来呈现地图，但是有必要显示它上的瓷砖，这意味着您可以根据自己的意愿用绳子渲染画布，使用标记、线条、多边形，甚至什么都不需要，只需从库导入该组件即可

如果您找到了另一个或更好的解决方案，请与我们分享，谢谢！

票数 1

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

原文链接：

https://stackoverflow.com/questions/51191759

复制

相似问题

问在用“创建-反应-应用程序”制作的react应用程序中，使用“react传单”库的正确方法是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在用“创建-反应-应用程序”制作的react应用程序中，使用“react传单”库的正确方法是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在用“创建-反应-应用程序”制作的react应用程序中，使用“react传单”库的正确方法是什么？
EN