反应和未被捕获的typerrors。试图遵循简单的可排序示例

时间：2015-11-05 20:47:57

标签： reactjs

我一直试图在react-dnd示例中使用简单的可排序示例，但是我在尝试将es7代码转换为es6时遇到了麻烦。我尝试过使用babel，但我真的不明白它吐出的代码。 这是我试图从es7转换为es6的代码：

import React, {PropTypes} from 'react';
import Router from 'react-router';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragSource, DropTarget } from 'react-dnd';

const style= {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move'
}

const ItemTypes = {
  Coursepage: 'coursepage'
};

const coursePageSource = {
    beginDrag(props) {
        return {
            id: props.id,
            index: props.index
        }
    }
}

const coursePageTarget = {
    hover(props, monitor, component){
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;

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

        //Determine rectangle on screen
        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

        //get vertical middle
        const hoverMiddleY = (hoverBoundingRect.Bottom - hoverBoundingRect.Top) /2;

        //get top pixels
        const hoverClientY = clientOffset.y - hoverBoundingRect.top;

        //only perform the move when the mouse has crossed half of the items height
        //when dragging downwards, only move when the cursor is below 50%
        //when dragging upwards, only move when the cursor is above 50%

        //dragging downwards
        if(dragIndex < hoverIndex && hoverClientY < hoverMiddleY){
            return;
        }

        //dragging upwards
        if(dragIndex > hoverIndex && hoverClientY > hoverMiddleY){
            return;
        }

        //time to actually perform the action
        props.moveObject(dragIndex, hoverIndex);


    }
}

// const propTypes = {
//     connectDragSource: PropTypes.func.isRequired,
//     connectDropTarget: PropTypes.func.isRequired,
//     index: PropTypes.number.isRequired,
//     isDragging: PropTypes.bool.isRequired,
//     id: PropTypes.any.isRequired,
//     text: PropTypes.string.isRequired,
//     moveCard: PropTypes.func.isRequired
// };

function collectDropTarget(connect) {
  return {
    connectDropTarget: connect.dropTarget(),
  };
}

/**
 * Specifies which props to inject into your component.
 */
function collectDragSource(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging()
  };
}

class Coursepage extends React.Component{

    render(){
        console.log(this.props);
        const {text, isDragging, connectDragSource, connectDropTarget} = this.props;
        const opacity = isDragging ? 0 : 1;
        return connectDragSource(connectDropTarget(
                <div style={{opacity}}>
                    {text}
                </div>
        ));
    }
}
// Coursepage.propTypes = propTypes;
export default DragSource(ItemTypes.Coursepage, coursePageSource, collectDragSource)(Coursepage);
export default DropTarget(ItemTypes.Coursepage, coursePageTarget, collectDropTarget)(Coursepage);

现在我从中得到的错误是

“Uncaught TypeError：connectDropTarget不是函数。”

我控制台在渲染中记录了this.props，我看到connectDragSource出现在this.props对象中但不是connectDropTarget。

谁能告诉我我错过了什么？

顺便说一句，这是我使用的示例代码：

https://github.com/gaearon/react-dnd/blob/master/examples/04%20Sortable/Simple/Card.js

1 个答案:

答案 0 :(得分：4)

我知道这有点旧，但是我通过谷歌来到这里，所以我想我会试一试。首先，您不能在3.2节http://www.2ality.com/2014/09/es6-modules-final.html

中引用两个默认导出。

相反，您需要将当前默认导出之一的结果传递给第二个函数调用 - 您将在下面看到。

我花了几个小时才开始工作，因为我也是Es6 / 7新手 - 所以我邀请任何批评！

// Container.js;
import React, { Component } from 'react';
import update from 'react/lib/update';
import Card from './Card';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const style = {
  width: 400
};

class Container extends Component {
  constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.findCard = this.findCard.bind(this);
    this.state = {
      cards: [{
        id: 1,
        text: 'Write a cool JS library'
      }, {
        id: 2,
        text: 'Make it generic enough'
      }, {
        id: 3,
        text: 'Write README'
      }, {
        id: 4,
        text: 'Create some examples'
      }, {
        id: 5,
        text: 'Spam in Twitter and IRC to promote it (note that this element is taller than the others)'
      }, {
        id: 6,
        text: '???'
      }, {
        id: 7,
        text: 'PROFIT'
      }]
    };
  }

  findCard(id) {
    const { cards } = this.state;
    const card = cards.filter(c => c.id === id)[0];

    return {
      card,
      index: cards.indexOf(card)
    };
  }

  moveCard(id, atIndex) {
    const { card, index } = this.findCard(id);
    this.setState(update(this.state, {
      cards: {
        $splice: [
          [index, 1],
          [atIndex, 0, card]
        ]
      }
    }));
  }

  render() {
    const { cards } = this.state;
    return (
      <div style={style}>
        {cards.map((card, i) => {
          return (
            <Card key={card.id}
                  index={i}
                  id={card.id}
                  text={card.text}
                  moveCard={this.moveCard} 
                  findCard={this.findCard} />
          );
        })}
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(Container)

然后是Card.js 

// Card.js
import React, { Component, PropTypes } from 'react';
import ItemTypes from './ItemTypes';
import { DragSource, DropTarget } from 'react-dnd';

const style = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move'
};

const cardSource = {
  beginDrag(props) {
    return {
      id: props.id,
      originalIndex: props.findCard(props.id).index
    };
  },

  endDrag(props, monitor) {
    const { id: droppedId, originalIndex } = monitor.getItem();
    const didDrop = monitor.didDrop();

    if (!didDrop) {
      props.moveCard(droppedId, originalIndex);
    }
  }
};

const cardTarget = {
  canDrop() {
    return false;
  },

  hover(props, monitor) {
    const { id: draggedId } = monitor.getItem();
    const { id: overId } = props;

    if (draggedId !== overId) {
      const { index: overIndex } = props.findCard(overId);
      props.moveCard(draggedId, overIndex);
    }
  }
};

function collect(connect, monitor) {
  console.log( "HERE2", connect );
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
}

function collect2(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
}

class Card extends Component {

  render() {

    const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
    const opacity = isDragging ? 0 : 1;

    return connectDragSource(connectDropTarget(
      <div >
        {text}
      </div>
    ));
  }
}

Card.propTypes = {
  connectDragSource: PropTypes.func.isRequired,
  connectDropTarget: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired,
  id: PropTypes.any.isRequired,
  text: PropTypes.string.isRequired,
  moveCard: PropTypes.func.isRequired,
  findCard: PropTypes.func.isRequired
};

const x = DropTarget(ItemTypes.CARD, cardTarget, collect )(Card)
export default DragSource(ItemTypes.CARD, cardSource, collect2 )( x )

然后类型包括

// ItemTypes.js
export default {
  CARD: 'card'
};
相关问题
最新问题