React

[react.js] リアクトでイベントリスナー

backham
const element = findDOMNode(this.refs.element); element.addEventListener('mouseover'),(e)=>{ this.mouseover(e); }); element.addEventListener('mouseout'),(e)=>{ this.mouseout(e); }); こうしてあげる this._mouseover = this.mouseover.bind(this); this._mouseout = this.mouseout.bind(this);</p> <p>const element = findDOMNode(this.refs.element); element.addEventListener('mouseover'),(e)=>{ this._mouseover(e); }); element.addEventListener('mouseout'),(e)=>{ this._mouseout(e); });

react-map-glのPopup

backham
1.Popupをインポート import {Popup} form ‘react-map-gl’; 2.使い方 hoge(){ return ( <Popup tipSize={5} //座標を指すチップのサイズ。 anchor=”top” //座標に対するポップアップの位置を示す文字列。オプシ

react-map-glのMarker

backham
1.Markerをインポート import { Marker } form ‘react-map-gl’; 使い方 hoge(){ return data.map((element,i)=>{ const {info,coordinates} = element; //data情報を取得 return ( <Marker key={i} longitude= {coordinates[0]} latitude={coordinates[1]} {info} ); }); }

react-map-glの導入

backham
1.react-map-glをインストール npm i --save react-map-gl 2.react内で使う import React from ‘react’; import ReactDOM from ‘react-dom’; import ReactMapGL from ‘react-map-gl’; class Map extends React.Component{ constructor(props){ super(props); this.state = { viewport:{ width :400, height :400, latitude :37.7577, longitude :-122.4376, zoom :8 } };