How to use the react-beautiful-dnd.DragDropContext function in react-beautiful-dnd

rightDataSource = _state3.rightDataSource,
        droppableId = _state3.droppableId;

    // const { leftDataSource, rightDataSource } = this.splitDataSource(this.props);

    var leftActive = targetSelectedKeys.length > 0;
    var rightActive = sourceSelectedKeys.length > 0;

    var cls = (0, _classnames2["default"])(className, prefixCls);

    var titles = this.getTitles();
    return _react2["default"].createElement(
      'div',
      { className: cls },
      _react2["default"].createElement(
        _reactBeautifulDnd.DragDropContext,
        { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart },
        _react2["default"].createElement(_list2["default"], {
          titleText: titles[0] //左侧标题
          , dataSource: leftDataSource //左侧数据源
          , filter: leftFilter //搜索框中输入的内容
          , filterOption: filterOption //搜索过滤方法 参数(inputValue, option)
          , style: listStyle //自定义的columns的样式表
          , checkedKeys: sourceSelectedKeys //左侧已勾选的item的keys
          , handleFilter: this.handleLeftFilter //左侧搜索框值更改事件
          , handleClear: this.handleLeftClear //清空左侧搜索框内容
          , handleSelect: this.handleLeftSelect //点击左侧列表中的item，改变选中或取消选中状态
          , handleSelectAll: this.handleLeftSelectAll //点击左侧全选
          , render: render,
          showSearch: showSearch //是否显示搜索框
          , searchPlaceholder: searchPlaceholder //搜索框placeholder
          , notFoundContent: notFoundContent //当没有相关内容的显示内容

var _props = this.props,
        onStart = _props.onStart,
        onDrag = _props.onDrag,
        onStop = _props.onStop,
        onDragUpdate = _props.onDragUpdate,
        dropClass = _props.dropClass,
        dropOverClass = _props.dropOverClass,
        dragClass = _props.dragClass,
        dragingClass = _props.dragingClass,
        showKey = _props.showKey,
        type = _props.type;


    return _react2["default"].createElement(
      _reactBeautifulDnd.DragDropContext,
      { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
      _react2["default"].createElement(
        _reactBeautifulDnd.Droppable,
        { droppableId: 'droppable', direction: type },
        function (provided, snapshot) {
          return _react2["default"].createElement(
            'div',
            {
              ref: provided.innerRef,
              className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop))
            },
            _this2.state.items.map(function (item, index) {
              return _react2["default"].createElement(
                _reactBeautifulDnd.Draggable,
                { key: index, draggableId: '' + index, index: index },
                function (provided, snapshot) {

dropOverClass = _props.dropOverClass,
            dragClass = _props.dragClass,
            dragingClass = _props.dragingClass,
            showKey = _props.showKey,
            type = _props.type;


        return _react2["default"].createElement(
            'div',
            { className: (0, _classnames2["default"])({
                    'u-drag-between': type == 'betweenVertical',
                    'u-drag-between u-drag-between-horizontal': type == 'betweenHorizontal'

                }) },
            _react2["default"].createElement(
                _reactBeautifulDnd.DragDropContext,
                { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
                _react2["default"].createElement(
                    _reactBeautifulDnd.Droppable,
                    { droppableId: 'droppable', direction: type == 'betweenVertical' ? 'vertical' : 'horizontal' },
                    function (provided, snapshot) {
                        return _react2["default"].createElement(
                            'div',
                            {
                                ref: provided.innerRef,
                                className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop)) },
                            _this2.state.items.map(function (item, index) {
                                return _react2["default"].createElement(
                                    _reactBeautifulDnd.Draggable,
                                    {
                                        key: '1' + index,
                                        draggableId: '1' + index,

var preview = itemSelectedId ? renderPreview(map[itemSelectedId], itemSelectedIndex) : null;

      return _react2.default.createElement(
        LayoutContainer,
        null,
        _react2.default.createElement(
          _layout2.default,
          null,
          _react2.default.createElement(
            Content,
            null,
            _react2.default.createElement(
              ContentContainer,
              null,
              _react2.default.createElement(
                _reactBeautifulDnd.DragDropContext,
                { onDragStart: this.onDragStart, onDragEnd: this.onDragEnd },
                nav.map(function (id) {
                  return map[id].children && _react2.default.createElement(
                    ColumnContainer,
                    { key: 'column-' + id },
                    _react2.default.createElement(_Column2.default, {
                      listId: id,
                      listType: 'card',
                      data: assemble(map, map[id].children),
                      autoFocusId: autoFocusId,
                      selectedId: itemSelectedId,
                      onClickItem: _this2.onClickItem,
                      itemSelectedColor: itemSelectedColor,
                      dropBackgroundColor: dropBackgroundColor,
                      renderItem: renderItem,
                      onOutsideDrop: onOutsideDrop,

const DND = require('react-beautiful-dnd');

exports.dragDropContextClass = DND.DragDropContext;
exports.draggableClass = DND.Draggable;
exports.droppableClass = DND.Droppable;

_extends({ defaultClassName: this.props.dragClass,
                    defaultClassNameDragging: this.props.dragingClass,
                    defaultClassNameDragged: this.props.draggedClass
                }, this.props),
                self.props.children
            )
        );
    };

    return Dnd;
}(_react.Component);

Dnd.propTypes = propTypes;
Dnd.defaultProps = defaultProps;
Dnd.Drag = _reactDraggable2["default"];
Dnd.DragDropContext = _reactBeautifulDnd.DragDropContext;
Dnd.Droppable = _reactBeautifulDnd.Droppable;
Dnd.Draggable = _reactBeautifulDnd.Draggable;
Dnd.GridLayout = _GridLayout2["default"];
exports["default"] = Dnd;
module.exports = exports['default'];

exports.default = function (_ref) {
  var children = _ref.children,
      onDragEnd = _ref.onDragEnd;
  return _react2.default.createElement(
    _reactBeautifulDnd.DragDropContext,
    { onDragEnd: onDragEnd },
    children
  );
};
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4dGVybmFsL2ZlbGEvbWVudS9kbmQvY29udGV4dC5lczYiXSwibmFtZXMiOlsiY2hpbGRyZW4iLCJvbkRyYWdFbmQiXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7a0JBRWU7QUFBQSxNQUFHQSxRQUFILFFBQUdBLFFBQUg7QUFBQSxNQUFhQyxTQUFiLFFBQWFBLFNBQWI7QUFBQSxTQUNiO0FBQUE7QUFBQSxNQUFpQixXQUFXQSxTQUE1QjtBQUF3Q0Q7QUFBeEMsR0FEYTtBQUFBLEMiLCJmaWxlIjoiZXh0ZXJuYWwvZmVsYS9tZW51L2RuZC9jb250ZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IERyYWdEcm9wQ29udGV4dCB9IGZyb20gJ3JlYWN0LWJlYXV0aWZ1bC1kbmQnO1xuXG5leHBvcnQgZGVmYXVsdCAoeyBjaGlsZHJlbiwgb25EcmFnRW5kIH0pID0+IChcbiAgPERyYWdEcm9wQ29udGV4dCBvbkRyYWdFbmQ9e29uRHJhZ0VuZH0+e2NoaWxkcmVufTwvRHJhZ0Ryb3BDb250ZXh0PlxuKTtcbiJdfQ==