【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法

2022年12月5日React

ReactのV18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法を紹介します。

【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法

2つの方法があります。

StrictModeを外す方法

Reactのバージョン18の場合、残念ながらまだreact-beautiful-dnd側が対応していないのですが、
ReactのstrictModeを外せば動かすことができます。

src/index.jsの以下の記述があります。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

それを、以下のように変更します。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

こちらの方法は、V18である程度アプリを作った段階だと選択肢として入りますが、
StrictModeがない状態では本番の開発ではなかなか使えない方法です。
個人開発の学習用などでは手軽にできるので、いい方法かもしれません。

ReactのV17にダウングレードする方法

ReactのV17にダウングレードするのは、割と簡単です。

package.jsonのdependencies部分を以下に変更します。

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^0.2.4"
},

その後、package-lock.json及びnode_modulesを削除します。
そして、yarn installまたはnpm installを実行して、新しいくV17のreactをいれます。

最後に、src/index.jsがV18とV17で書き方が変更されているので、
以下の記述に変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

これで、yarn startもしくは、npm startをすれば、strictModeをオンにした状態でも正常に動作するようになります。