Ant Design - Table

项目中打算用到 Table 组件中的拖拽,根据官方文档中写法引入之后，报错

TypeError: react WEBPACK IMPORTED MODULE_0__.useEffect is not a function

后面发现，是 react 和 react-dom 的版本问题, 原先的版本都是

“react”: “^16.7.0”,
“react”: “^16.7.0”,

npm i -s react@16.7.0-alpha.0
npm i -s react-dom@16.7.0-alpha.0

现在的版本
“react”: “^16.7.0-alpha.0”,
“react-dom”: “^16.7.0-alpha.0”,

现在就不报错了
还有就是，原先官方的写法是在同一个文件中定义了一个class，这个也是不合语法的，现在将它设置成一个常量，以下是 Table 在项目中的引用

import React, { Component } from 'react';
import { Table } from '@hyperchain/ql-oa-antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import './style.scss';

let dragingIndex = -1;

const BodyRow = props => {
  const {
    isOver,
    connectDragSource,
    connectDropTarget,
    moveRow,
    ...restProps
  } = props;
  const style = { ...restProps.style, cursor: 'move' };

  let { className } = restProps;
  if (isOver) {
    if (restProps.index > dragingIndex) {
      className += ' drop-over-downward';
    }
    if (restProps.index < dragingIndex) {
      className += ' drop-over-upward';
    }
  }

  return connectDragSource(
    connectDropTarget(<tr {...restProps} className={className} style={style} />)
  );
};

const rowSource = {
  beginDrag(props) {
    dragingIndex = props.index;
    return {
      index: props.index
    };
  }
};

const rowTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  }
};

const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver()
}))(
  DragSource('row', rowSource, connect => ({
    connectDragSource: connect.dragSource()
  }))(BodyRow)
);

class DepartmentManagePage extends Component {
  constructor() {
    super();

    this.state = {
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park'
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park'
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park'
        }
      ],
      components: {
        body: {
          row: DragableBodyRow
        }
      }
    };
  }

  moveRow = (dragIndex, hoverIndex) => {
    const { data } = this.state;
    const dragRow = data[dragIndex];
    const stateobj = this.state;

    this.setState(
      update(stateobj, {
        data: {
          $splice: [
            [dragIndex, 1],
            [hoverIndex, 0, dragRow]
          ]
        }
      })
    );
  };

  render() {
    const { data, components } = this.state;

    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address'
      }
    ];

    return (
      <div
        className="oa-content-container postiton-list-page"
        id="components-table-demo-drag-sorting"
      >
        <DndProvider backend={HTML5Backend}>
          <Table
            columns={columns}
            dataSource={data}
            components={components}
            onRow={(_record, index) => ({
              index,
              moveRow: this.moveRow
            })}
          />
        </DndProvider>
      </div>
    );
  }
}

export default DepartmentManagePage;