ReactDnD, permettent de créer un simple DragDropContext - DragSource exemple

Question

Je suis nouveau à réagir et suivant this tutorial pour ajouter Drag'n'Drop à ma demande

Je suivais l'étape tutoriel par étape pour créer un échiquier avec un morceau de chevalier draggable, mais n'a pas pu le faire fonctionner (encore incapable de faire glisser le chevalier)

// imports 
var {DragSource, DragDropContext} = ReactDnD; 

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

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

var Knight = DragSource("knight", knightSource, collect)(React.createClass({ 
    render() { 
     var style = { 
      cursor: 'move', 
      fontSize: 25 
     } 
     return(
      <div style={style}>♘</div> 
     ); 
    } 
})); 


var Board = DragDropContext(HTML5Backend)(React.createClass({ 
    render() { 
     var style = { 
      width: '500px', 
      height: '500px', 
      border: '1px solid black', 
      boxShadow: '4px 2px 2px black' 
     } 
     return (
      <div style={style}> 
       <Knight/> 
      </div> 
     ); 
    } 
})); 

ReactDOM.render(
    <Board/>, 
    document.getElementById('ex13') 
); 

}); Est-ce que quelqu'un peut expliquer ce que je fais mal?

Answer 1

Vous êtes en train d'encapsuler le composant Knight avec le DragSource (itemType, source, collection) correctement, mais dans le composant knight alors vous devez envelopper ce que rend le rendu avec this.props.connectDragSource, similaire au tutoriel (je viens de copié ici):

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

Notez comment il saisit le connectDragSource des accessoires (et injecté par la fonction Collect), puis enveloppe la balise div avec elle.