Réagissez DND, connectDragSource n'est pas une erreur de fonction

Question

J'essaie de suivre le tutoriel React DND Chess (assez simple), mais j'ai l'air de tomber sur un bout de mon code. J'obtiens une erreur indiquant que connectDragSource n'est pas une fonction, quand je l'ai déclarée comme telle dans mon code ci-dessous. J'ai essayé de résoudre le problème pour le jour passé, et j'ai manqué de prospects. Si cela aide, j'utilise la chaudière React-Redux-Universal, mais je doute que cela cause des problèmes via mes routes et que les enfants soient rendus.

Code de composants:

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

Accueil Code de composants:

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

Code de l'application:

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

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

Answer 1

J'ai fixé mon problème, en passant au-dessus de tout ES6 à ES5 Syntaxe. Vraiment bizarre, mais ça a marché, voir le code ci-dessous:

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