react.js

React DnD と React Redux を試してみた

投稿日:2018年9月12日 更新日:

React DnD

React DnDは、Reactでドラッグ・アンド・ドロップ機能を実現するライブラリ.

チュートリアルを試してみたあとで、react-reduxと同時に試してみた.

React DnDの仕組み

DragDropContext

まず、ドラッグ・アンド・ドロップの対象にしたいコンポーネントをまとめて、DragDropContextコンポーネントでくくる.

基本、HTML5のDrag Drop APIをつかうけど、react-dnd-multi-backendをつかうと、モバイルのタッチイベントにも対応してくれる.

DragSource

次に、DragDropContextの下で、ドラッグしたい対象をDragSourceでくくる.

このとき、少なくとも、type,spec,collectの指定が必要.
typeは、ドラッグしたい対象のタイプを決める.ドロップ先がtypeで選別する.
specは、ReactDnDが決めた対象の挙動を決めるオブジェクト.ここの返り値のオブジェクトは、monitor.getItem()から取得できる.
collectは、関数を集めてオブジェクトを返すようにしたもの.結果をpropsにわたす.

DragTarget

最後に、ドロップ先のコンポーネントを設定する.
受け取ったコンポーネントは、ドラッグしたコンポーネントの情報を受け取るので、ここからreduxにdispatchして再描画することになる.

react-reduxと一緒に使う

チュートリアルのチェス盤の例では、次のような構造になる.

  • App.js
    • Board.js = DragDropContext
      • BoardSquare.js = DropTarget
        • Square.js
          • Knight.js = DragSource

今回は、react-reduxとあわせて次のような構造にした

  • index.js = Provider(react-redux)
    • app.js = DragDropContext(react-dnd) connect(react-redux)
      • board.js
        • square.js = DropTarget(react-dnd) dispatch(react-redux)
          • piece.js = DragSource(react-dnd)

ポイントは、connectの前にDragDropContextすること.
でないと、 cannot have two HTML5 backends at the same time. というエラーが出た.

試しに将棋盤をつくってみた

駒台をつくって成りができるようにした

-react.js
-, ,

執筆者: