react动态创建100个组件

react动态创建100个组件步骤如下：

1、创建一个HelloComponent.js文件，写入组件。并在App.js中调用HelloComponent组件。

2、在HelloComponent.js文件中分别使用三种方式创建组件。

npm install --save react-amap

react-amap包含地图，覆盖物，信息窗体3类组件

<Map amapkey={'788e08def03f95c670944fe2c78fa76f'}/>

需要在地图上启用鼠标工具插件时使用；启用该插件可以进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

constructor(){

this.mapPlugins = ['ToolBar']

    this.mapCenter = {longitude: 120, latitude: 35}

    }

<Map

          plugins={this.mapPlugins}

          center={this.mapCenter}

        >

在地图上创建一个图标，组件要放在地图组件Map里面，position表示坐标， Marker 的外观可以通过设置style自定义，还可以通过events绑定事件

  this.markerPosition = {longitude: 121, latitude: 36}

  <Marker position={this.markerPosition}  events={this.markerEvents}/>

在地图上创建大量图标；

const randomPosition = () =>({

  longitude: 100 + Math.random() * 20,

  latitude: 30 + Math.random() * 20

})

const randomMarker = (len) =>(

  Array(len).fill(true).map((e, idx) =>({

    position: randomPosition()

  }))

)

  markers: randomMarker(100),

  <Markers

            markers={this.state.markers}

          />

在地图上一个多边形或者环状多边形时使用；

  const randomPath = () =>({

  longitude: 100 + Math.random() * 50,

  latitude: 10 + Math.random() * 40,

})

  this.state = {

      visible: true,

      draggable: true,

      path: Array(4).fill(true).map(randomPath),

    }

    this.events = {

      click: () =>{console.log('clicked')},

      created: (ins) =>{console.log(ins)},

      mouseover: () =>{console.log('mouseover')},

      dblclick: () =>{console.log('dbl clicked')}

    }

  <Polygon

            events={this.events}

            path={this.state.path}

            draggable={this.state.draggable}

            visible={this.state.visible}

          />

在地图上一个折线段的时候；

const randomPath = () =>({

longitude: 60 + Math.random() * 50,

latitude: 10 + Math.random() * 40,

})

this.state = {

      visible: true,

      draggable: true,

      path: Array(5).fill(true).map(randomPath),

    }

    this.lineEvents = {

      created: (ins) =>{console.log(ins)},

      show: () =>{console.log('line show')},

      hide: () =>{console.log('line hide')},

      click: () =>{console.log('line clicked')},

    }

<Polyline

            path={ this.state.path }

            events={ this.lineEvents }

            visible={ this.state.visible }

            draggable={ this.state.draggable }

          /> 

需要在地图上显示一个圆形时；

const randomIndex = (len) =>(Math.floor(Math.random() * len))

const randomColor = () =>{

  const chars = '0123456789abcdef'.split('')

  const len = chars.length

  return `#${chars[randomIndex(len)]}${chars[randomIndex(len)]}`

  + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}`

  + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}`

}

this.state = {

      center: {longitude: 120, latitude: 20},

      radius: 15000,

      visible: true,

      style: {strokeColor: '#f00'},

      draggable: true,

    }

    this.circleEvents = {

      created: (ins) =>{console.log(window.circle = ins)},

      click: () =>{console.log('clicked')},

      mouseover: () =>{console.log('mouseover')},

    }

<Circle

            center={ this.state.center }

            radius={ this.state.radius }

            events={ this.circleEvents }

            visible={ this.state.visible }

            style={ this.state.style }

            draggable={ this.state.draggable }

          />

需要在地图上特定边界区域内显示一张图片时使用；

  this.events = {

      created: (i) =>{console.log(i)},

      click: () =>{console.log('img click')},

      dblclick: () =>{console.log('img dblclick')},

    }

    this.state = {

      src: this.pics[0],

      visible: true,

      opacity: 1,

      bounds: bc.bounds,

      mapCenter: bc.center,

    }

<GroundImage

            visible={this.state.visible}

            events={this.events}

            bounds={this.state.bounds}

            src={this.state.src}

            opacity={this.state.opacity}

            clickable

          />

需要在地图上显示一个信息窗体的时候使用；在一个地图上最多只能同时显示一个信息窗体。

详细信息见[官网](https://elemefe.github.io/react-amap/articles/start)

---