• 当前高德地图的react版本 饿了么的react-amap项目地址为:https://github.comElemeFE/react-amap 新的react-amap-next项目地址:...当前react版本amap的开源库react-amap介绍 使用方法 impor...

    当前高德地图的react版本

    当前react版本amap的开源库react-amap介绍

    • 使用方法
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Map, Polygon } from 'react-amap';
    
    ReactDOM.render(
     <Map amapkey={YOUR_AMAPKEY} version={VERSION} useAMapUI={USE_AMAP_UI} events={EVENTS_MAP}>
       <Polygon path={...} bubble={...}/>
     </Map>,
     document.querySelector('#app')
    )

      使用过程中需要注意,amapkey和version需要作为Map属性传入,组件内部实现了高德地图相关js文件的加载:(https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值).
      组件的使用主要在events属性中,events属性是一个事件处理函数集合,组件相关的事件均可在events中处理,但Map中有一个特殊事件,Map组件创建完后会触发created事件,在这个事件处理函数中可以做一些初始化,另外,其他的地图上触发事件如click等均可放到events中传入.如下例子:

        events = {
          created: map => {
            this.setState({ mapInstance: map });
            window.AMap.plugin('AMap.Geocoder', () => {
              let geocoder = new window.AMap.Geocoder({
                //city: "010"//城市,默认:“全国”
              });
              this.setState({ geocoder });
            });
          },
          click: mapevt => {
            //console.log('mapevt:', mapevt);
            let gps = mapevt.lnglat;
            this.getAddressByGps(gps)
              .then(retAddr => this.setState({ ...retAddr }))
              .catch(error => {
                console.log('error!', error);
              });
            this.setState({ gps });
          },
        };

      created事件比较特殊,可以在此事件中初始化一些非可视化插件,比如AMap.Geocoder,AMap.Geolocation等,如上例,初始化了AMap.Geocoder ,并且塞到state中,以后可以被调用.注意调用时最好判断this.state.geocoder是否为空.
      其他详细使用方法参照官网.

    react-amap使用中的注意事项及使用体验

    1. created是加载高德js完毕触发的事件,参数为map实例,可以之后调用map的方法,在createdwindow.AMap已经加载完成,可以调用AMap相关子类及方法等,注意map是Map类的实例.
    2. 每次调用高德地图都在<Map events={created:func}>中的created中获取window.AMap,多个页面都调用了Map,会导致每个Map都要处理created函数,初始化逻辑非常冗余.如果使用redux,这部分初始化代码最好能独立,使用一个action直接获取后放入到store中,后续不用再处理created事件.
    3. 还是created造成的问题,一般非显示组件在这里面初始化,同时会保存下来供后续使用.但每个Map一般都会用到一些组件,都得重新初始化,重新创建,增加了很多没必要的开销.
    4. 对于一些非显示组件的使用,会用到window.AMap.event.addListener ,用常规回调函数方式,感觉不是很react,例子如下.这部分可以使用高德AMap的webservice替代,地址:(概述-Web服务 API | 高德地图API).
              window.AMap.event.addListener(geolocation, 'complete', data => {
                console.log('data:', data);
                //let center = {}
                ///this.setState({center:data.position, gps:data.position});
                this.setState({ center: data.position });
              }); //返回定位信息

      其他优缺点,大家可以补充.

    新的解决方案react-amap-next,重复造这个轮子的出发点

    项目地址(windsome/react-amap-next)
    1. created方法在每个Map加载中都写,重复工作大.逻辑判断复杂,非常不适合react以数据为导向的思想,初始化只不过加载高德地图的js文件,加载完成后获得window.AMap类,后续开发均基于此类.基于此,可以将初始化部分独立出来,作为一个函数loadMap调用.
    2. 对于组件的属性的设置, react-amap只是支持有限的属性.我期望实现一种方便支持所有属性的方式, 同时希望属性能方便被更新, 这导致我给组件加一个options的想法,所有属性都写在里面.
    3. 对于组件属性的更新,我希望直接修改options即完成对属性的更新,而不用手动去调用setXXX方法.
    4. 我希望得到组件的高德实例,有个某些特殊情况下需要特殊控制(一般比较少).我采用refer参数方式,类似react中的ref机制,我只实现了简单的函数方式.
    5.events的处理,我希望使用原有方式,但我希望能方便更新.
    6. 总之,我希望使用起来非常简单,并且不出错.

    react-amap-next方案介绍

    1. 地图加载部分,api.js中包装 APILoader.js, 最后通过loadMap函数给外界调用初始化过程.
    2. 地图组件部分, Map.js Marker.js MassMarks.js Polygon.js Polyline.js InfoWindow.js
    3. events部分, 使用on,off方式注册及取消某个事件.
    4. 组件的开发:主要实现constructor, componentDidMount componentDidUpdate componentWillUnmount render 函数,详细可以查看源码.主要把握创建高德实例和销毁高德实例过程.

    react-amap-next使用方法

    // 首先安装react-amap-next
    yarn add react-amap-next
    // 加载所需组件
    import { loadMap } from 'react-amap-next/lib/api'; //加载高德地图方法,如果与redux配合,可以写在action/reducer中
    import Map from 'react-amap-next/lib/Map';
    import Marker from 'react-amap-next/lib/Marker';
    
    // 在componentDidMount中加载js
    componentDidMount() {
      loadMap('<amap-key>').then(AMap=>{
        // 可在此做一些初始化
        this.setState({AMap});
      })
    }
    // 在render中使用Map,注意其中参数refer类似react中ref,只支持函数,可以获得amap实例;options是参数,更新的参数也通过此处传下去,events是地图事件的回调,设置后将会被调用,可以触发属性的改变.
    // 一般地图组件都包含AMap, refer, options, events4个属性.
    // 注意, options和events中的函数和变量最好都为外面声明的,而不使用匿名的函数.否则容易触发事件的频繁移除及更新,耗费性能.
    render() {
      return (
      <Map refer={} AMap={this.state.AMap} style={{width:1200, height:800}} options={{}} events={{}} >
      </Map>
      )
    }

    具体用例参考src/App.js.

    react-amap-next的不足之处

    1. events属性,是一些事件处理函数的集合,最好不要是写在render中的函数或匿名函数,否则每次render函数都会重新实例化,会导致频繁调用on和off进行绑定和解绑事件.
    2. options属性是高德组件的属性集合,参考高德官方文档即可.某些调用set进行设置的内容,可以作为属性添加,还有一些属性是AMap类中的一些子类,看起来比较复杂.并且属性是进行深比对,不一样的就会更新.
    3. 目前组件还比较少,只满足了我个人的使用需求,有待增加
    展开全文
  • 业务需求,正好对接了 google map 。初次使用,碰到了很多细节问题,于是总结整理,也算是学习过程自己踩过的坑吧。 一、React 中如何引入1.使用 google-map-react ;1npm install --save google-map-react 使用示例...

    业务需求,正好对接了 google map 。初次使用,碰到了很多细节问题,于是总结整理,也算是学习过程自己踩过的坑吧。

    一、React 中如何引入

    1.使用 google-map-react

    1
    npm install --save google-map-react

    使用示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import React, { Component } from 'react';
    import GoogleMapReact from 'google-map-react';

    const AnyReactComponent = ({ text }) => <div>{text}</div>;

    class SimpleMap extends Component {
    static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
    };

    render() {
    return (
    <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    >
    <AnyReactComponent
    lat={59.955413}
    lng={30.337844}
    text={'Kreyser Avrora'}
    />
    </GoogleMapReact>
    );
    }
    }

    demo 演示地址

    2.使用 react-google-maps

    1
    2
    npm install --save react-google-maps # or
    yarn add react-google-maps

    简单代码示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import {
    withGoogleMap,
    GoogleMap,
    Marker,
    } from "react-google-maps";

    const MapWithAMarker = withGoogleMap(props =>
    <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
    <Marker
    position={{ lat: -34.397, lng: 150.644 }}
    />
    </GoogleMap>
    );

    <MapWithAMarker
    containerElement={<div style={{ height: `400px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
    />

    demo 文档地址demo 演示地址

    友情提示,记得提前引入 Google Map API

    1
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

    二、API 调用次数限制:

    Google Map 虽然是免费的,但是也是有调用次数限制,这里列举几条计数的规则:

    • 重新加载;
    • 调用地图;
    • 切换卫星模式;
    • 切换全景模式;

    三、经纬度查询:

    处理地图业务,可能会用到一个经纬度检测工具: GPS SPG

    四、地图个性化

    如果你不想局限于默认的地图,可以在这里找到答案:个性化地图样式

    首先,我们需要下载一个 JSON 类型的样式文件

    其次,引入文件:

    1
    const demoFancyMapStyles = require("./demoFancyMapStyles.json");

    最后,在 Map 初始化的时候应用定义样式:

    1
    2
    3
    4
    5
    6
    <GoogleMap
    defaultZoom={5}
    defaultCenter={props.center}
    defaultOptions={{ styles: demoFancyMapStyles }}
    >
    </GoogleMap>

    OK,大功告成,可以刷新页面查看新的地图样式了。此外,这里推荐两款样式相关的工具:

    五、关于 DrawingManager

    1.DrawingManager undefined 处理方式:
    遇到这个问题,需要在加载 Map API 的时候初始化 libraries=drawing,如下:

    1
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8Qspe99idJxy7QlEi_VIH2Bcl9y5Mlqk&libraries=drawing"></script>

    2.DrawingManagerOption 说明文档:

    3.DrawManager 画图按键监听:
    当我们使用 DrawManager 的时候,可能会有按键监听的需求,那么只需要这么写:

    1
    2
    3
    4
    5
    6
    7
    google.maps.event.addDomListener(document, 'keyup', function (e) {    
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 27) {
    drawingManager.setDrawingMode(null);
    polygon.setMap(null);
    }
    });

    更多内容,请查看:参考示例

    4.对于 DrawManager 来说,清除地图时需要调用 setDrawingMode(null)

    1
    2
    this._drawingManager.setDrawingMode(null);
    clearFlag.setMap && clearFlag.setMap(null);

    此处参考:
    how-to-remove-previous-shape-when-drawing-new-shape-is-started-on-google-map

    5.Draw Manage 如果要拖动图形,需要把 Clickable 设置为 True

    1
    2
    clickable: true,
    draggable: true,

    6.扩展 Google Draw Manager Toolbar
    我们可以发现,Draw Manager 只支持给定的配置,如果我们有扩展的需求呢?此处,我们需要清除 Map 上绘制的图形,所以只能自行扩展,思路如下:

    添加一个与 Draw Manager 相似的按钮,控制显示位置即可。


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .clearbtn{
    border: 1px solid #e2e1e1;
    border-left: 1px solid #f6f4f4;
    display: inline-block;
    padding: 2.5px 5px;
    position: absolute;
    bottom: 4px;
    left: 50%;
    margin-left: 48px;
    cursor: pointer;
    background: #fff;
    &:hover{
    background: #eceaea;
    }
    }

    7.如何给 Draw Manager 添加修改监听事件?

    绘制图形最难的就是对其添加事件监听,我们需要注意两个事件 set_atinsert_at

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Add an event listener that selects the newly-drawn shape when the user
    // mouses down on it.
    var newShape = e.overlay;
    newShape.type = e.type;
    google.maps.event.addListener(newShape, 'click', function() {
    google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
    console.log("test");
    });

    google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
    console.log("test");
    });
    setSelection(newShape);
    });

    此处参考:

    六、地图事件监听

    上述例子只是列举了个别监听事件,详细请查看文档:事件监听 API

    示例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    handleOverlayComplete(event) {
    let newShape = event.overlay;
    clearFlag = event.overlay;
    newShape.type = event.type;
    shapes.push(newShape);

    if (this._drawingManager.getDrawingMode()) {
    this._drawingManager.setDrawingMode(null);
    }

    if (newShape.type === 'polygon') {
    google.maps.event.addListener(newShape.getPath(), 'set_at', () => {
    console.log(newShape.getPaths(), 'polygon_set_at');
    });

    google.maps.event.addListener(newShape.getPath(), 'insert_at', () => {
    console.log(newShape.getPaths(), 'polygon_insert_at');
    });
    } else if (newShape.type === 'rectangle') {
    google.maps.event.addListener(newShape, 'bounds_changed', () => {
    console.log(newShape.getBounds(), 'rectangle_changed');
    });
    } else if (newShape.type === 'circle') {
    google.maps.event.addListener(newShape, 'radius_changed', () => {
    console.log(newShape.getRadius(), 'circle_radius_changed');
    });
    google.maps.event.addListener(newShape, 'center_changed', () => {
    console.log(newShape.getCenter().lat(), newShape.getCenter().lng(), 'circle_center_changed');
    });
    }
    }

    七、引入多个 Map Lib

    多个 Map Lib 需要在引入 API 的时候,需要用 & 连接起来,如: libraries=geometry,places&sensor=false,示例如下:

    1
    2
    <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=false">

    此处容易出现的问题,如:
    1.this api project is not authorized to use this API 如何解决

    1
    2
    3
    4
    5
    From the picture you posted, it say it's disabled...

    Go to Developer Console -> APIs & auth -> APIs

    Search for Geocoding and click on Google Maps Geocoding API -> Enable API. Do the same thing for Geolocating

    API 文档

    八、如何更改 Marker 图标:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
    };

    <Marker position={marker.position} key={index} icon={image} />

    1.为标记添加动画

    1
    2
    3
    4
    5
    6
    marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
    });

    2.标记如何全部显示在可见区域:

    • Marker 适配示例

      1
      2
      3
      4
      5
      6
      7
      var markers = [];//some array
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
      }

      map.fitBounds(bounds);
    • Circle 适配示例

      1
      2
      3
      4
      5
      6
      7
      8
      var bounds = circle.getBounds();
      bounds.union(rectangle.getBounds();
      for (var aa=0; aa < arrayLatitude.length; aa++) {
      var points = new google.maps.LatLng(arrayLatitude[aa], arrayLongitude[aa]);
      bounds.extend(points);
      }

      map.fitBounds(bounds);

    更多详情,请参考如下:
    Marker
    Circle
    Shape
    LatLngBounds

    展开全文
  • map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }...

    map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:

    
    var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
      return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16
    callback需要有return值,如果没有,就像下面这样:
    var data = [1, 2, 3, 4];
    var arrayOfSquares = data.map(function() {});
    
    arrayOfSquares.forEach(console.log);
    

    结果如下图,可以看到,数组所有项都被映射成了undefined:

    在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子(之后的兼容demo也是该例子):

    var users = [
      {name: "张含韵", "email": "zhang@email.com"},
      {name: "江一燕",   "email": "jiang@email.com"},
      {name: "李小璐",  "email": "li@email.com"}
    ];
    
    var emails = users.map(function (user) { return user.email; });
    
    console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com
    
    
    展开全文
  • react-native-baidu-map简单应用 demo: http://download.csdn.net/detail/keen_zuxwang/9837094 命令行创建项目工程、安装、关联组件 1、react-native init myrnbaidumap 2、cd myrnbaidumap // react-native-...

    react-native-baidu-map简单应用

    demo: http://download.csdn.net/detail/keen_zuxwang/9837094

    命令行创建项目工程、安装、关联组件
    1、react-native init myrnbaidumap
    2、cd myrnbaidumap
    // react-native-baidu-map component:https://github.com/lovebing/react-native-baidu-map

    npm install react-native-baidu-map --save

    3、配置android工程
    首先在android目录下加入local.properties(命令行创建工程,默认不包含该文件,指定android工程sdk目录sdk.dir)

    a、android/settings.gradle 中添加:

    include ':react-native-baidu-map'
    project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

    b、android/app/build.gradle 中添加:

    dependencies {
        compile project(':react-native-baidu-map') // 添加
        compile fileTree(dir: "libs", include: ["*.jar"])
        compile "com.android.support:appcompat-v7:23.0.1"
        compile "com.facebook.react:react-native:+"  // From node_modules
    }

    c、android/app/src/main/AndroidManifest.xml 中添加:
    访问权限:

        <!-- 这个权限用于进行网络定位-->
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
        <!-- 这个权限用于访问GPS定位-->
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
        <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
        <uses-permission android:name="android.permission.WAKE_LOCK"/>
        <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
        <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    
        <application
          ...
          <meta-data
                android:name="com.baidu.lbsapi.API_KEY"
                android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key
    
          ...
        </application>

    b、android/app/src/main/java/[…]/MainApplication.java 中添加:

    import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加
    
        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new BaiduMapPackage(getApplicationContext()) // 添加
          );
        }

    4、index.android.js 添加功能实现(导入相关功能组件):

    import React, { Component } from 'react';
    import {
      AppRegistry,
    } from 'react-native';
    
    import BaiduMapDemo from './BaiduMapDemo' //需在index.android.js同级目录下添加BaiduMapDemo.js文档
    
    export default class BaiDuMapDemo extends Component {
      render() {
        return (
          <BaiduMapDemo/>
        );
      }
    }
    
    AppRegistry.registerComponent('myrnbaidumap', () => BaiDuMapDemo);

    5、命令行执行(即开启packager, Running packager on port 8081):
    react-native start
    //浏览器地址栏输入:http://localhost:8081/index.android.bundle?platform=android,检测看server是否启动完成

    6、命令行执行(连接android真机/模拟器,新开命令窗口,进入到项目myrnbaidumap目录下,输入如下指令):
    react-native run-android

    7、真机/模拟器显示运行界面(初次运行会显示Unable to download JS bundle 提示界面,需点击菜单按键进入 Dev Settings–>Debug server host & port for device 设置IP和端口(android 5.0版本以下才需配置以上项,android 5.0版本以上则执行adb reverse tcp:8081 tcp:8081命令即可), 然后返回点击从新载入Reload即可正常显示界面)

    Debug JS Remotely:
    点击Developer Menu的Debug JS Remotely项开启, 成功会自动开启chrome调试界面
    Enable Live Reload:
    会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上,但每次都会自动返回到启动页面
    Hot Reloading:
    会自动生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载

    这里写图片描述

    展开全文
  • 最近开发是遇到的问题function NumberList(props) { const numbers = props.numbers; return ( {numbers.map((number) => ()} value={number} />

    最近开发是遇到的问题

    function NumberList(props) {
      const numbers = props.numbers;
      return (
        <ul>
          {numbers.map((number) =>
            <ListItem key={number.toString()}
                      value={number} />
          )}
        </ul>
      );
    }

    https://facebook.github.io/react/docs/lists-and-keys.html#rendering-multiple-components

    以上例子势能正常运行的,但是由于写法上出现了一些偏差 我的代码竟然没有了效果 ,错误案例如下

    function NumberList(props) {
      const numbers = props.numbers;
      return (
        <ul>
          {numbers.map((number) =>
          {
            <ListItem key={number.toString()}
                      value={number} />
           }
          )}
        </ul>
      );
    }

    如上所示,在=>后面家了个大括号竟然无法运行了,真是奇怪. 分析了半天才找到yunyin

    展开全文
  • reactmap方法中如何添加三元条件判断,实现条件渲染?? 比如说我数据库的一个字段是level,我想通过不同的level值实现条件渲染。react怎么实现??比如说我有level值1,2,3,4。我的代码例子是通过showtstate...
  • 最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法。 在调用amap的Geocoder Api 时,一直不能从AMap对象下找到Geocoder 的方法...
  • Reactmap() 方法的使用,以及 key 值的绑定。 1.这里以一个循环显示一个数组ToDoList的例子来展示。 import React, { Component } from 'react' export default class App extends Component { constructor...
  • react 脚手架打包不生成 sourceMap 的解决方案 前言 我相信很多前端工程师都跟我一样,用惯了开源的项目脚手架工具以后,都不习惯自己配置 webpack 了。 经常听同行们开玩笑说,某某某个公司要启动一个项目,所有的...
  • 简介 上一个笔记,达到的目的是初步学会了如何初步打包一个Openlayers和React结合的框架。下一步就是开始准备进行...所以现在开始设计,首先要考虑的问题就是Map对象,Map对象是OL中的一个全局对象必须要保证他的...
  • 题目: 实现一个组件 BlackBorderContianer,它会把作为它的嵌套结构的 每个直接子元素 都用一个黑色边框的 div 包裹起来。例如: &amp;amp;amp;lt;BlackBorderContainer&amp;amp;amp;...
  • 之前简单学习了react 组件是怎么写的,比如下面这个: import React from 'react'; import './intro.css'; export default class Intro extends React.Component { render(){ return( &lt;div&gt;我是...
  • 为什么80%的码农都做不了架构师?>>> ...
  • 现在最热门的前端框架,毫无疑问是 React 。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
  • JavaScript中的map函数使用
  • map() 在React中循环使用map方法 例子 <ul> { this.state.list.map((item, index) => { return <li>{item}</li> }) } </ul>
  • 在使用react中,经常用到reactmap函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input...
  • 最近在学习react,跟着网上的例子敲的时候,在map遍历出了个小问题  代码是这样的 const data = [1,2,3,4,5]; const listItems = data.map((item) =&gt; &lt;li key={number.toString()}&gt;{item}&...
  • import React, {Component} from 'react'; import {render} from 'react-dom'...import {StaticMap} from 'react-map-gl'; import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core'; import {Hexag...
  • 这里举个例子来讲怎样在React 使用原生高德地图,其它类型的地图的引入也很类似。 刚开始的时候,本来想着直接从 npm 里面引入,但查了一下,无论高德地图,还是百度,腾讯地图,都没有一个比较全的库,而且大部分...
1 2 3 4 5 ... 20
收藏数 8,455
精华内容 3,382