diff --git a/lib/DragScroll.js b/lib/DragScroll.js
index 83625fb..d2d5c49 100644
--- a/lib/DragScroll.js
+++ b/lib/DragScroll.js
@@ -54,7 +54,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-	"use strict";
+	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
@@ -83,6 +83,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	var DragScroll = function (_React$Component) {
 	  _inherits(DragScroll, _React$Component);
 
+	  _createClass(DragScroll, null, [{
+	    key: 'computeStyle',
+	    value: function computeStyle(props) {
+	      if (props.height && props.width) {
+	        return { style: { height: props.height, width: props.width, overflow: 'auto' } };
+	      }
+	      return null;
+	    }
+	  }]);
+
 	  function DragScroll(props) {
 	    _classCallCheck(this, DragScroll);
 
@@ -90,41 +100,46 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    _this.state = {
 	      data: props.dataSource,
-	      dragging: false
+	      dragging: false,
+	      containerStyle: DragScroll.computeStyle(props)
 	    };
+
+	    _this.mouseDownHandle = _this.mouseDownHandle.bind(_this);
+	    _this.mouseMoveHandle = _this.mouseMoveHandle.bind(_this);
+	    _this.mouseUpHandle = _this.mouseUpHandle.bind(_this);
 	    return _this;
 	  }
 
 	  _createClass(DragScroll, [{
-	    key: "render",
+	    key: 'render',
 	    value: function render() {
-	      var sytle = null;
-	      if (this.props.height && this.props.width) {
-	        sytle = { style: { height: this.props.height, width: this.props.width, overflow: 'auto' } };
-	      }
+	      var _this2 = this;
+
 	      return _react2.default.createElement(
-	        "div",
-	        _extends({ className: this.props.className }, sytle, {
-	          onMouseUp: this.mouseUpHandle.bind(this),
-	          onMouseMove: this.mouseMoveHandle.bind(this),
-	          ref: "container" }),
+	        'div',
+	        _extends({ className: this.props.className }, this.state.containerStyle, {
+	          onMouseUp: this.mouseUpHandle,
+	          onMouseMove: this.mouseMoveHandle,
+	          ref: function ref(e) {
+	            _this2.container = e;
+	          } }),
 	        this.props.children && this.renderChildren(this.props.children)
 	      );
 	    }
 	  }, {
-	    key: "componentDidMount",
+	    key: 'componentDidMount',
 	    value: function componentDidMount() {
-	      window.addEventListener('mouseup', this.mouseUpHandle.bind(this));
-	      window.addEventListener('mousemove', this.mouseMoveHandle.bind(this));
+	      window.addEventListener('mouseup', this.mouseUpHandle);
+	      window.addEventListener('mousemove', this.mouseMoveHandle);
 	    }
 	  }, {
-	    key: "componentWillUnmount",
+	    key: 'componentWillUnmount',
 	    value: function componentWillUnmount() {
-	      window.removeEventListener('mouseup', this.mouseUpHandle.bind(this));
-	      window.removeEventListener('mousemove', this.mouseMoveHandle.bind(this));
+	      window.removeEventListener('mouseup', this.mouseUpHandle);
+	      window.removeEventListener('mousemove', this.mouseMoveHandle);
 	    }
 	  }, {
-	    key: "mouseUpHandle",
+	    key: 'mouseUpHandle',
 	    value: function mouseUpHandle(e) {
 	      if (this.state.dragging) {
 	        this.state.dragging = false;
@@ -132,7 +147,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	    }
 	  }, {
-	    key: "mouseDownHandle",
+	    key: 'mouseDownHandle',
 	    value: function mouseDownHandle(e) {
 	      if (!this.state.dragging) {
 	        this.state.dragging = true;
@@ -143,40 +158,48 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	    }
 	  }, {
-	    key: "mouseMoveHandle",
+	    key: 'mouseMoveHandle',
 	    value: function mouseMoveHandle(e) {
 	      if (this.state.dragging) {
-	        this.refs.container.scrollLeft -= -this.lastClientX + (this.lastClientX = e.clientX);
-	        this.refs.container.scrollTop -= -this.lastClientY + (this.lastClientY = e.clientY);
+	        this.container.scrollLeft -= -this.lastClientX + (this.lastClientX = e.clientX);
+	        this.container.scrollTop -= -this.lastClientY + (this.lastClientY = e.clientY);
 	      }
 	    }
 	  }, {
-	    key: "renderChildren",
+	    key: 'renderChildren',
 	    value: function renderChildren(dom, type) {
-	      var _this2 = this;
+	      var _this3 = this;
 
 	      if (this.isArray(dom)) {
 	        return dom.map(function (item, index) {
 	          return _react2.default.cloneElement(item, {
 	            key: item.key || index,
-	            onMouseUp: _this2.mouseUpHandle.bind(_this2),
-	            onMouseDown: _this2.mouseDownHandle.bind(_this2)
+	            onMouseUp: _this3.mouseUpHandle,
+	            onMouseDown: _this3.mouseDownHandle
 	          });
 	        });
-	      } else if ('object' == (typeof dom === "undefined" ? "undefined" : _typeof(dom))) {
+	      } else if ('object' == (typeof dom === 'undefined' ? 'undefined' : _typeof(dom))) {
 	        return _react2.default.cloneElement(dom, {
-	          onMouseUp: this.mouseUpHandle.bind(this),
-	          onMouseDown: this.mouseDownHandle.bind(this)
+	          onMouseUp: this.mouseUpHandle,
+	          onMouseDown: this.mouseDownHandle
 	        });
 	      }
 	    }
 	  }, {
-	    key: "isArray",
+	    key: 'isArray',
 	    value: function isArray(object) {
-	      return object && (typeof object === "undefined" ? "undefined" : _typeof(object)) === 'object' && typeof object.length === 'number' && typeof object.splice === 'function' &&
+	      return object && (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && typeof object.length === 'number' && typeof object.splice === 'function' &&
 	      //判断length属性是否是可枚举的 对于数组 将得到false
 	      !object.propertyIsEnumerable('length');
 	    }
+	  }], [{
+	    key: 'getDerivedStateFromProps',
+	    value: function getDerivedStateFromProps(nextProps, prevState) {
+	      if (!prevState.containerStyle || prevState.containerStyle.style.height !== nextProps.height || prevState.containerStyle.style.width !== nextProps.width) {
+	        return { containerStyle: DragScroll.computeStyle(nextProps) };
+	      }
+	      return null;
+	    }
 	  }]);
 
 	  return DragScroll;
diff --git a/package.json b/package.json
index 7de4d11..e9e53a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dragscroll",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "React DragScroll is a React component which enables scrolling via holding the mouse button.",
   "main": "index.js",
   "files": [
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/qiaolb/react-dragscroll#readme",
   "dependencies": {
-    "react": "^16.1.1"
+    "react": "^16.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
diff --git a/src/DragScroll.jsx b/src/DragScroll.jsx
index dd69be4..f57536a 100644
--- a/src/DragScroll.jsx
+++ b/src/DragScroll.jsx
@@ -5,35 +5,52 @@
 import React from "react";
 
 export default class DragScroll extends React.Component {
+  static computeStyle(props) {
+    if (props.height && props.width) {
+      return {style: {height: props.height, width: props.width, overflow: 'auto'}};
+    }
+    return null;
+  }
+  container;
   constructor(props) {
     super(props);
     this.state = {
       data: props.dataSource,
-      dragging: false
+      dragging: false,
+      containerStyle: DragScroll.computeStyle(props),
     };
-  }
 
+    this.mouseDownHandle = this.mouseDownHandle.bind(this);
+    this.mouseMoveHandle = this.mouseMoveHandle.bind(this);
+    this.mouseUpHandle = this.mouseUpHandle.bind(this);
+  }
+  
   render() {
-    let sytle = null;
-    if (this.props.height && this.props.width) {
-      sytle = {style: {height: this.props.height, width: this.props.width, overflow: 'auto'}};
-    }
-    return <div className={this.props.className} {...sytle}
-                onMouseUp={this.mouseUpHandle.bind(this)}
-                onMouseMove={this.mouseMoveHandle.bind(this)}
-                ref="container">
+    return <div className={this.props.className} {...this.state.containerStyle}
+                onMouseUp={this.mouseUpHandle}
+                onMouseMove={this.mouseMoveHandle}
+                ref={(e) => {this.container = e;}}>
       {this.props.children && this.renderChildren(this.props.children)}
     </div>;
   }
 
   componentDidMount() {
-    window.addEventListener('mouseup', this.mouseUpHandle.bind(this));
-    window.addEventListener('mousemove', this.mouseMoveHandle.bind(this));
+    window.addEventListener('mouseup', this.mouseUpHandle);
+    window.addEventListener('mousemove', this.mouseMoveHandle);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!prevState.containerStyle 
+      || (prevState.containerStyle.style.height !== nextProps.height 
+      || prevState.containerStyle.style.width !== nextProps.width)) {
+     return { containerStyle: DragScroll.computeStyle(nextProps) };
+    }
+    return null;
   }
 
   componentWillUnmount() {
-    window.removeEventListener('mouseup', this.mouseUpHandle.bind(this));
-    window.removeEventListener('mousemove', this.mouseMoveHandle.bind(this));
+    window.removeEventListener('mouseup', this.mouseUpHandle);
+    window.removeEventListener('mousemove', this.mouseMoveHandle);
   }
 
   mouseUpHandle(e) {
@@ -55,9 +72,9 @@ export default class DragScroll extends React.Component {
 
   mouseMoveHandle(e) {
     if (this.state.dragging) {
-      this.refs.container.scrollLeft -=
+      this.container.scrollLeft -=
         (-this.lastClientX + (this.lastClientX = e.clientX));
-      this.refs.container.scrollTop -=
+      this.container.scrollTop -=
         (-this.lastClientY + (this.lastClientY = e.clientY));
     }
   }
@@ -67,14 +84,14 @@ export default class DragScroll extends React.Component {
       return dom.map((item, index) => {
         return React.cloneElement(item, {
           key: item.key || index,
-          onMouseUp: this.mouseUpHandle.bind(this),
-          onMouseDown: this.mouseDownHandle.bind(this)
+          onMouseUp: this.mouseUpHandle,
+          onMouseDown: this.mouseDownHandle
         });
       });
     } else if ('object' == typeof dom) {
       return React.cloneElement(dom, {
-        onMouseUp: this.mouseUpHandle.bind(this),
-        onMouseDown: this.mouseDownHandle.bind(this)
+        onMouseUp: this.mouseUpHandle,
+        onMouseDown: this.mouseDownHandle
       });
     }
   }
diff --git a/yarn.lock b/yarn.lock
index 4df5b87..eb9cf6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -258,13 +258,14 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-loader@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+babel-loader@^6.2.5:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.4.1.tgz#0b34112d5b0748a8dcdbf51acf6f9bd42d50b8ca"
   dependencies:
-    find-cache-dir "^1.0.0"
-    loader-utils "^1.0.2"
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.16"
     mkdirp "^0.5.1"
+    object-assign "^4.0.1"
 
 babel-messages@^6.23.0:
   version "6.23.0"
@@ -1107,19 +1108,20 @@ finalhandler@1.1.0:
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
-find-cache-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
   dependencies:
     commondir "^1.0.1"
-    make-dir "^1.0.0"
-    pkg-dir "^2.0.0"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
 
-find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
   dependencies:
-    locate-path "^2.0.0"
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
 
 for-in@^1.0.1:
   version "1.0.2"
@@ -1540,7 +1542,7 @@ lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
 
-loader-utils@^0.2.11, loader-utils@^0.2.5:
+loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.5:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -1549,21 +1551,6 @@ loader-utils@^0.2.11, loader-utils@^0.2.5:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
-  dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
 lodash@^4.17.2, lodash@^4.17.4, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -1578,12 +1565,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
-make-dir@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
-  dependencies:
-    pify "^3.0.0"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -1836,16 +1817,6 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-p-limit@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  dependencies:
-    p-limit "^1.1.0"
-
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -1867,9 +1838,11 @@ path-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
 
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
 
 path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
@@ -1887,15 +1860,21 @@ performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
 
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
   dependencies:
-    find-up "^2.1.0"
+    find-up "^1.0.0"
 
 preserve@^0.2.0:
   version "0.2.0"
@@ -2027,9 +2006,9 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
-react@^16.1.1:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@^16.3.0:
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.3.0.tgz#fc5a01c68f91e9b38e92cf83f7b795ebdca8ddff"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"