use ref callback properly (#319)

src/components/interactive-map.js

@@ -152,11 +152,7 @@ export default class InteractiveMap extends PureComponent {
   }
 
   componentDidMount() {
-    const {eventCanvas, staticMap} = this.refs;
-
-    this._map = staticMap;
-
-    const eventManager = new EventManager(eventCanvas);
+    const eventManager = new EventManager(this._eventCanvas);
 
     // Register additional event handlers for click and hover
     eventManager.on('mousemove', this._onMouseMove);
@@ -266,6 +262,14 @@ export default class InteractiveMap extends PureComponent {
     }
   }
 
+  _eventCanvasLoaded(ref) {
+    this._eventCanvas = ref;
+  }
+
+  _staticMapLoaded(ref) {
+    this._map = ref;
+  }
+
   render() {
     const {width, height, getCursor} = this.props;
 
@@ -279,12 +283,12 @@ export default class InteractiveMap extends PureComponent {
     return (
       createElement('div', {
         key: 'map-controls',
-        ref: 'eventCanvas',
+        ref: this._eventCanvasLoaded,
         style: eventCanvasStyle
       },
         createElement(StaticMap, Object.assign({}, this.props, {
           visible: this.checkVisibilityConstraints(this.props),
-          ref: 'staticMap'
+          ref: this._staticMapLoaded
         }))
       )
     );

src/components/popup.js

@@ -85,15 +85,14 @@ export default class Popup extends Component {
     const {viewport} = this.context;
     const {anchor, dynamicPosition, tipSize} = this.props;
 
-    const {content} = this.refs;
-    if (content) {
+    if (this._content) {
       return dynamicPosition ? getDynamicPosition({
         x, y, anchor,
         padding: tipSize,
         width: viewport.width,
         height: viewport.height,
-        selfWidth: content.clientWidth,
-        selfHeight: content.clientHeight
+        selfWidth: this._content.clientWidth,
+        selfHeight: this._content.clientHeight
       }) : anchor;
     }
 
@@ -104,6 +103,10 @@ export default class Popup extends Component {
     this.props.onClose();
   }
 
+  _contentLoaded(ref) {
+    this._content = ref;
+  }
+
   _renderTip() {
     const {tipSize} = this.props;
 
@@ -118,7 +121,7 @@ export default class Popup extends Component {
     const {closeButton, children} = this.props;
     return createElement('div', {
       key: 'content',
-      ref: 'content',
+      ref: this._contentLoaded,
       className: 'mapboxgl-popup-content'
     }, [
       closeButton && createElement('button', {

src/components/static-map.js

@@ -129,7 +129,7 @@ export default class StaticMap extends PureComponent {
       this.props.mapStyle.toJS() :
       this.props.mapStyle;
     const map = new mapboxgl.Map({
-      container: this.refs.mapboxMap,
+      container: this._mapboxMap,
       center: [this.props.longitude, this.props.latitude],
       zoom: this.props.zoom,
       pitch: this.props.pitch,
@@ -376,6 +376,10 @@ export default class StaticMap extends PureComponent {
     }
   }
 
+  _mapboxMapLoaded(ref) {
+    this._mapboxMap = ref;
+  }
+
   render() {
     const {className, width, height, style, visible} = this.props;
     const mapContainerStyle = Object.assign({}, style, {width, height, position: 'relative'});
@@ -401,7 +405,7 @@ export default class StaticMap extends PureComponent {
         children: [
           createElement('div', {
             key: 'map-mapbox',
-            ref: 'mapboxMap',
+            ref: this._mapboxMapLoaded,
             style: mapStyle,
             className
           }),

src/overlays/canvas-overlay.js

@@ -43,7 +43,7 @@ export default class CanvasOverlay extends Component {
 
   _redraw() {
     const pixelRatio = window.devicePixelRatio || 1;
-    const canvas = this.refs.overlay;
+    const canvas = this._canvas;
     const ctx = canvas.getContext('2d');
     ctx.save();
     ctx.scale(pixelRatio, pixelRatio);
@@ -61,13 +61,17 @@ export default class CanvasOverlay extends Component {
     ctx.restore();
   }
 
+  _canvasLoaded(ref) {
+    this._canvas = ref;
+  }
+
   render() {
     const pixelRatio = window.devicePixelRatio || 1;
     const {viewport: {width, height}} = this.context;
 
     return (
       createElement('canvas', {
-        ref: 'overlay',
+        ref: this._canvasLoaded,
         width: width * pixelRatio,
         height: height * pixelRatio,
         style: {

src/overlays/html-overlay.js

@@ -46,7 +46,6 @@ export default class HTMLOverlay extends Component {
 
     return (
       createElement('div', {
-        ref: 'overlay',
         style
       },
         this.props.redraw({

src/overlays/svg-overlay.js

@@ -44,7 +44,6 @@ export default class SVGOverlay extends Component {
 
     return (
       createElement('svg', {
-        ref: 'overlay',
         width: viewport.width,
         height: viewport.height,
         style