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

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

1.Popupをインポート

import {Popup} form ‘react-map-gl’;

2.使い方

hoge(){

return (

<Popup

tipSize={5} //座標を指すチップのサイズ。

anchor=”top” //座標に対するポップアップの位置を示す文字列。オプションはtopbottomleftrighttop-lefttop-rightbottom-leftbottom-right

react-map-glのMarker

1.Markerをインポート

import { Marker } form ‘react-map-gl’;

  1. 使い方

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の導入

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’;

underscoreとlodashメモ

_.findはどちらにもあるけど、
_.findWhereと_.whereはunderscoreにしかない

_.filterか_.findで_.whereを代用する