fix: Refs Must Have Owner Warning

build/Table.js

@@ -347,15 +347,15 @@ var Table = function (_Component) {
     }
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
       this.columnManager.reset(nextProps.columns);
-      if (nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable) {
+      if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
-        this.scrollTop = this.refs.bodyTable.scrollTop;
+        this.scrollTop = this.bodyTable.scrollTop;
       }
     } else if (nextProps.children !== this.props.children) {
       this.columnManager.reset(null, nextProps.children);
     }
     //适配lazyload
     if (nextProps.scrollTop > -1) {
-      // this.refs.bodyTable.scrollTop = nextProps.scrollTop;
+      // this.bodyTable.scrollTop = nextProps.scrollTop;
       this.scrollTop = nextProps.scrollTop;
     }
     if (!nextProps.originWidth) {
@@ -382,7 +382,7 @@ var Table = function (_Component) {
     if (this.scrollTop > -1) {
       this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
       this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
-      this.refs.bodyTable.scrollTop = this.scrollTop;
+      this.bodyTable.scrollTop = this.scrollTop;
       this.scrollTop = -1;
     }
     if (prevProps.data.length === 0 || this.props.data.length === 0) {
@@ -444,11 +444,11 @@ var Table = function (_Component) {
     var props = this.props;
     var y = props.scroll && props.scroll.y;
     if (y) {
-      var bodyH = this.refs.bodyTable.clientHeight;
+      var bodyH = this.bodyTable.clientHeight;
-      var bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight;
+      var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
       var rightBodyTable = this.refs.fixedColumnsBodyRight;
       var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
-      this.refs.bodyTable.style.overflowY = overflowy;
+      this.bodyTable.style.overflowY = overflowy;
       this.refs.headTable.style.overflowY = overflowy;
       rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
     }
@@ -1077,7 +1077,9 @@ var Table = function (_Component) {
       {
         className: clsPrefix + '-body',
         style: bodyStyle,
-        ref: 'bodyTable',
+        ref: function ref(el) {
+          _this4.bodyTable = el;
+        },
         onMouseOver: this.detectScrollTarget,
         onTouchStart: this.detectScrollTarget,
         onScroll: this.handleBodyScroll,
@@ -1191,8 +1193,8 @@ var Table = function (_Component) {
         columns = _props7.columns,
         heightConsistent = _props7.heightConsistent;
 
-    var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
+    var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
-    var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
     var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
     var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
@@ -1237,8 +1239,8 @@ var Table = function (_Component) {
     if (this.refs.headTable) {
       this.refs.headTable.scrollLeft = 0;
     }
-    if (this.refs.bodyTable) {
+    if (this.bodyTable) {
-      this.refs.bodyTable.scrollLeft = 0;
+      this.bodyTable.scrollLeft = 0;
     }
   };
 

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-  var props = [],
+    var props = [],
-      ret = [],
+        ret = [],
-      i = 0,
+        i = 0,
-      len = arr.length;
+        len = arr.length;
-  if (typeof prop == 'string') {
+    if (typeof prop == 'string') {
-    for (; i < len; i++) {
+        for (; i < len; i++) {
-      var oI = arr[i];
+            var oI = arr[i];
-      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+        }
+    } else if (typeof prop == 'function') {
+        for (; i < len; i++) {
+            var _oI = arr[i];
+            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+        }
+    } else {
+        throw '参数类型错误';
     }
-  } else if (typeof prop == 'function') {
+    props.sort();
-    for (; i < len; i++) {
+    for (i = 0; i < len; i++) {
-      var _oI = arr[i];
+        ret[i] = props[i]._obj;
-      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
     }
-  } else {
+    if (desc) ret.reverse();
-    throw '参数类型错误';
+    return ret;
-  }
-  props.sort();
-  for (i = 0; i < len; i++) {
-    ret[i] = props[i]._obj;
-  }
-  if (desc) ret.reverse();
-  return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-  return function (a, b) {
+    return function (a, b) {
-    var value1 = a[property];
+        var value1 = a[property];
-    var value2 = b[property];
+        var value2 = b[property];
-    return value1 - value2;
+        return value1 - value2;
-  };
+    };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-  var b = obj instanceof Array;
+    var b = obj instanceof Array;
-  var tagObj = b ? [] : {};
+    var tagObj = b ? [] : {};
-  if (b) {
+    if (b) {
-    //数组
+        //数组
-    obj.forEach(function (da) {
+        obj.forEach(function (da) {
-      var _da = {};
+            var _da = {};
-      _extends(_da, da);
+            _extends(_da, da);
-      tagObj.push(_da);
+            tagObj.push(_da);
-    });
+        });
-  } else {
+    } else {
-    _extends(tagObj, obj);
+        _extends(tagObj, obj);
-  }
+    }
-  return tagObj;
+    return tagObj;
 }

src/Table.js

@@ -184,15 +184,15 @@ class Table extends Component {
     }
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
       this.columnManager.reset(nextProps.columns);
-      if(nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable){
+      if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
-         this.scrollTop = this.refs.bodyTable.scrollTop;
+         this.scrollTop = this.bodyTable.scrollTop;
      }
     } else if (nextProps.children !== this.props.children) {
       this.columnManager.reset(null, nextProps.children);
     }
     //适配lazyload
     if(nextProps.scrollTop > -1){
-      // this.refs.bodyTable.scrollTop = nextProps.scrollTop;
+      // this.bodyTable.scrollTop = nextProps.scrollTop;
       this.scrollTop = nextProps.scrollTop;
     }
     if (!nextProps.originWidth) {
@@ -220,7 +220,7 @@ class Table extends Component {
     if(this.scrollTop > -1){
       this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
       this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
-      this.refs.bodyTable.scrollTop = this.scrollTop;
+      this.bodyTable.scrollTop = this.scrollTop;
       this.scrollTop = -1;
     }
     if (prevProps.data.length === 0  || this.props.data.length === 0 ) {
@@ -300,11 +300,11 @@ class Table extends Component {
     const props = this.props;
     const y = props.scroll && props.scroll.y;
     if(y){
-      const bodyH = this.refs.bodyTable.clientHeight;
+      const bodyH = this.bodyTable.clientHeight;
-      const bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight;
+      const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
       const rightBodyTable = this.refs.fixedColumnsBodyRight;
       const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
-      this.refs.bodyTable.style.overflowY = overflowy;
+      this.bodyTable.style.overflowY = overflowy;
       this.refs.headTable.style.overflowY = overflowy;
       rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
       
@@ -927,7 +927,7 @@ class Table extends Component {
       <div
         className={`${clsPrefix}-body`}
         style={bodyStyle}
-        ref="bodyTable"
+        ref={(el)=>{this.bodyTable = el}}
         onMouseOver={this.detectScrollTarget}
         onTouchStart={this.detectScrollTarget}
         onScroll={this.handleBodyScroll}
@@ -1020,8 +1020,8 @@ class Table extends Component {
     const { clsPrefix, height, headerHeight,columns,heightConsistent } = this.props;
     const headRows = this.refs.headTable ?
       this.refs.headTable.querySelectorAll('thead') :
-      this.refs.bodyTable.querySelectorAll('thead');
+      this.bodyTable.querySelectorAll('thead');
-    const bodyRows = this.refs.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
     const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
     const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
     const fixedColumnsHeadRowsHeight = [].map.call(
@@ -1069,8 +1069,8 @@ class Table extends Component {
     if (this.refs.headTable) {
       this.refs.headTable.scrollLeft = 0;
     }
-    if (this.refs.bodyTable) {
+    if (this.bodyTable) {
-      this.refs.bodyTable.scrollLeft = 0;
+      this.bodyTable.scrollLeft = 0;
     }
   }