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]} ); }); }

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 ‘reac