Reagiere DND, connectDragSource nicht ein Funktionsfehler

Question

Ich versuche, im React DND Chess-Tutorial (einfach genug) zu folgen, aber ich habe anscheinend einen Haken mit einem Stück meines Codes gefunden. Ich erhalte einen Fehler, der besagt, dass connectDragSource keine Funktion ist, wenn ich sie so deklariert habe, wie in meinem Code unten gezeigt. Ich habe versucht, es für den letzten Tag zu beheben, und haben keine Leads mehr. Wenn es hilft, verwende ich den React-Redux-Universal-Boiler, aber ich bezweifle, dass das Probleme auf meinen Routen verursacht und dass Kinder gerendert werden.

Component Code:

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); 

Start Component Code:

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); 

App-Code:

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

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

Answer 1

ich mein Problem behoben haben, indem sie alles über von ES6 bis ES5 Schalt Syntax. Wirklich seltsam, aber es funktioniert, siehe Code unten:

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);