javascript - React DND，connectDragSource 不是函数错误

Question

我正在尝试遵循 React DND Chess 教程(足够简单)，但我的一段代码似乎遇到了障碍。当我将其声明为如下面的代码所示时，我收到一条错误消息，指出 connectDragSource 不是一个函数。过去一天我已经尝试对其进行故障排除，但已经没有线索了。如果有帮助，我正在使用 React-Redux-Universal 锅炉，但我怀疑这会通过我的路线和渲染的子项引起任何问题。

组件代码:

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

require('./box1.css');


const pieceSource = {
    beginDrag(props){
        return {};
    }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.DragSource(),
    isDragging: monitor.isDragging()
  }
};


export default class Student extends Component{

  render() {
    const { connectDragSource, isDragging } = this.props;
      return connectDragSource(
        <div style={{
          opacity: isDragging ? 0.5 : 1,
          fontSize: 25,
          fontWeight: 'bold',
          cursor: 'move'
        }}>
          ♘ !
        </div>
    );
  }
}

Student.PropTypes = {
  connectDragSource: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired
};



DragSource(ItemTypes.STUDENT, pieceSource, collect)(Student);

主页组件代码:

import React, { Component, PropTypes } from 'react';
import Header from '../../components/Header/header';
import Footer from '../../components/Footer/footer';
import Student from '../../components/box1/box1';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
require('./home.css');


 class Home extends Component{
  render() {

    return (



        <div id="main">

              Hello World  
               <Student />



          </div>

    );
  }
}

export default DragDropContext(HTML5Backend)(Home);

应用程序代码:

import React, { Component, PropTypes } from 'react';
require('./app.css');

export default React.createClass({
  render() {
    return (
      <div id="app">
        {this.props.children}
      </div>
    );
  }
});

Answer 1

我通过将所有内容从 ES6 语法切换到 ES5 语法解决了我的问题。真的很奇怪，但它有效，请参阅下面的代码:

var React = require('react');
var PropTypes = React.PropTypes;
var ItemTypes = require('./Constants').ItemTypes;
var DragSource = require('react-dnd').DragSource;

var knightSource = {
  beginDrag: function (props) {
    return {};
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }
}

var Knight = React.createClass({
  propTypes: {
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired
  },

  render: function () {
    var connectDragSource = this.props.connectDragSource;
    var isDragging = this.props.isDragging;

    return connectDragSource(
      <div style={{
        opacity: isDragging ? 0.5 : 1,
        fontSize: 25,
        fontWeight: 'bold',
        cursor: 'move'
      }}>
        ♘
      </div>
    );
  }
});

module.exports = DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight);