2

私はReactを初めて使用し、アプリケーションにドラッグアンドドロップを追加するための このチュートリアルに従っています

チュートリアルに従って、騎士の駒をドラッグできるチェス盤を作成しましたが、機能しませんでした (まだ騎士をドラッグできません)。

    // 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}>♘&lt;/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')
);

});

誰かが私が間違っていることを説明できますか?

4

1 に答える 1

2

騎士コンポーネントを DragSource(itemType, source, collect) で適切にラップしていますが、チュートリアルと同様に、レンダリングが this.props.connectDragSource で返すものを騎士コンポーネント内でラップする必要があります (ここにコピーしました)。 :

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

彼が props から connectDragSource を取得し (そして collect 関数によって挿入され)、それで div タグをラップする方法に注意してください。

于 2016-05-28T15:30:13.770 に答える