Javascript React DND，connectDragSource不是函数错误

我试图按照React DND国际象棋教程（足够简单）进行操作，但我的一段代码似乎遇到了障碍。当我在下面的代码中声明connectDragSource时，我收到一个错误，指出connectDragSource不是一个函数。在过去的一天里，我一直在尝试对其进行故障排除，但已经没有线索了。如果有帮助的话，我正在使用React-Redux通用锅炉，但我怀疑这会通过我的路线和正在渲染的孩子造成任何问题

组件代码：

 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}来自'React'；
从'react dnd'导入{DragSource}；
从“/Constants.js”导入{ItemTypes}；
要求（'./box1.css'）；
常量片段源={
开端（道具）{
返回{}；
}
};
功能收集（连接、监视）{
返回{
connectDragSource:connect.DragSource（），
isDraging:monitor.isDraging（）
}
};
导出默认类学生扩展组件{
render（）{
const{connectDragSource，isDragging}=this.props；
返回connectDragSource(
♘ !
);
}
}
Student.PropTypes={
connectDragSource:PropTypes.func.isRequired，
IsTragging:需要PropTypes.bool.isRequired
};
DragSource（ItemTypes.STUDENT、pieceSource、collect）（学生）；

主部件代码：

 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}来自'React'；
从“../../components/Header/Header”导入标题；
从“../../components/Footer/Footer”导入页脚；
从“../../components/box1/box1”导入学生；
从'react dnd'导入{DragDropContext}；
从“react-dnd-html5-backend”导入html5后端；
需要（'./home.css'）；
类Home扩展组件{
render（）{
返回(
你好，世界
);
}
}
导出默认DragDropContext（HTML5Backend）（主页）；

应用程序代码：

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

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

import React，{Component，PropTypes}来自'React'；
要求（'./app.css'）；
导出默认的React.createClass({
render（）{
返回(
{this.props.children}
);
}
});

通过将所有语法从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);

var React=require（'React'）；
var PropTypes=React.PropTypes；
var ItemTypes=require（'./常量'）。ItemTypes；
var DragSource=require（'react-dnd'）。DragSource；
var knightSource={
开端：功能（道具）{
返回{}；
}
};
功能收集（连接、监视）{
返回{
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
}
}
var Knight=React.createClass({
道具类型：{
connectDragSource:PropTypes.func.isRequired，
IsTragging:需要PropTypes.bool.isRequired
},
渲染：函数（）{
var connectDragSource=this.props.connectDragSource；
var isDragging=this.props.isDragging；
返回connectDragSource(
♘
);
}
});
module.exports=DragSource（ItemTypes.KNIGHT、knightSource、collect）（骑士）；

通过将所有语法从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);

var React=require（'React'）；
var PropTypes=React.PropTypes；
var ItemTypes=require（'./常量'）。ItemTypes；
var DragSource=require（'react-dnd'）。DragSource；
var knightSource={
开端：功能（道具）{
返回{}；
}
};
功能收集（连接、监视）{
返回{
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
}
}
var Knight=React.createClass({
道具类型：{
connectDragSource:PropTypes.func.isRequired，
IsTragging:需要PropTypes.bool.isRequired
},
渲染：函数（）{
var connectDragSource=this.props.connectDragSource；
var isDragging=this.props.isDragging；
返回connectDragSource(
♘
);
}
});
module.exports=DragSource（ItemTypes.KNIGHT、knightSource、collect）（骑士）；

This:

connectDragSource:connect.DragSource（），

将“connectDragSource”属性设置为调用

connect.DragSource（）

返回的值-这真的是您想要的吗？该函数是否返回另一个函数？是的，这就是预期用途，因为它是一个高阶函数。这就像React DND tutorial@PointyWell上列出的一样，如果你遇到了这个错误，可能是某些东西没有按照你认为应该的方式工作。你可以在“collect”函数返回对象之前添加一些代码来记录它的值。这真是个聪明的主意，让我试试吧。谢谢@Pointy@Pointy我刚刚考虑过这个，但是“collect”函数实际上还没有被调用；只有在DND监视/检查更新的值时，才会调用get（因为模块永远无法构建，所以实际上永远不会执行）。我注意到的问题在于，当我尝试将JSX return div包装为我的connectDragSource函数（在组件代码中）时，这就是破坏它的原因，但我不知道为什么。我显式地声明它是一个w/PropTypes.funct.isRequired函数。因此，这使得它更令人困惑：

connectDragSource:connect.DragSource（），

将“connectDragSource”属性设置为调用

connect.DragSource（）

返回的值-这真的是您想要的吗？该函数是否返回另一个函数？是的，这就是预期用途，因为它是一个高阶函数。这就像React DND tutorial@PointyWell上列出的一样，如果你遇到了这个错误，可能是某些东西没有按照你认为应该的方式工作。你可以在“collect”函数返回对象之前添加一些代码来记录它的值。这真是个聪明的主意，让我试试吧。谢谢@Pointy@Pointy我刚刚考虑过这个，但是“collect”函数实际上还没有被调用；只有在DND监控/检查更新值时，才会调用它（因为模块永远无法构建，所以它是ac）