React DnDは、Reactアプリケーションでドラッグ&ドロップを実現するライブラリです。公式の「Tutorial」にもとづいて1年前につくった作例が、少し前にライブラリをアップデートしたら動かなくなりました。昨年使ったライブラリがv10.0.2、最新はv14.0.2です。更新が頻繁なのは喜ばしいというべきでしょう。けれどその間、後方互換性を破る更新がいくつかありました。それらを書きとめておきます。
なお、v14.0に合わせてチュートリアルシリーズ「Create React App + React DnD」(全4回)を書きました。「Tutorial」の作例を実際につくってみたい方は、ぜひご覧ください(各回の解説の結びにCodeSandboxのサンプルを公開しています)。
HTML5Backendは名前つきでimportする
まず、v11.0.0で、HTML5Backendがexport defaultでなくなりました。したがって、HTML5Backendは名前つきでimportしなければならないということです。
// import HTML5Backend from 'react-dnd-html5-backend'
import { HTML5Backend } from 'react-dnd-html5-backend'
理由は、つぎのように説明されています。つまり、ライブラリの開発方針としてexport defaultはできるだけ使わないようにしたそうです。実際、公式「Tutorial」の作例も、コンポーネントのexportは基本的に名前つきになっていました。
In general, throughout the app we've minimized the usage of default exports as well.
useDragとuseDropの引数はコールバック関数で仕様オブジェクトを返す
v13.0.0では、useDragとuseDropの引数が、仕様オブジェクトでなく、仕様オブジェクトを返すコールバック関数になりました。そして、第2引数には依存配列を与えます。つまり、ReactのuseMemoと同じ構文になったのです。
これも、1年前の作例が動かなくなった理由かと思ったら、違いました。v13.1.0で、もともとの仕様オブジェクトを渡す構文も復活したからです。
useDrag(() => spec, [deps]) // useMemo型構文
useDrag(spec) // 復活
ただし、第2引数は残ります。けれど、省いて構いません。デフォルトの依存配列が用いられるからです。構文について詳しくは、「useDragフック」および「useDropフック」をご参照ください。
useDragで定める仕様オブジェクトのtypeプロパティは直下に置く
少しやっかいだったのは、v14.0.0で加えられたつぎの変更です。なにしろ「Breaking Changes」の表記がありません。内部的な改善のために、typeとitemを切り離したようです。
useDrag(() => {
// item: { type: BOX } },
type: BOX,
})
以上を改めたところ、1年前の作例も動くようになりました(useDragとuseDropは、useMemo型の構文に書き替えました)。でき上がりはCodeSandboxに公開してあります。つくり方については、前出「Create React App + React DnD」(全4回)をお読みください。