reactjs - 如何在 ReactJs 中安装和创建可排序树？

Question

如何从 npm 命令（npm i react-sortable-tree）创建和安装可排序树。

我正在尝试安装 react-sortable-tree 但出现以下错误：

npm i react-sortable-tree
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: admin-panel@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-sortable-tree@2.8.0
npm ERR! node_modules/react-sortable-tree
npm ERR!   react-sortable-tree@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\child\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\child\AppData\Local\npm-cache\_logs\2021-08-20T12_59_52_880Z-debug.log

此外，我不只是尝试安装这个包，我尝试了许多 npm 包并得到相同的错误消息。

我试过 rc-tree、react-sortly react-dnd react-dnd-html5-backend immutability-helper memoize-one、react super tree view、@atlaskit/tree、react-treeview、react-vtree 和 react-super-treeview插件，但错误是一样的。

我早上所做的只是将 npm 版本升级到 7.21.0 并将 node 升级到 v16.7.0。可能是升级后，应用程序停止工作和安装，但我不确定。

以下是我的 package.json

========================package.json============================================
{
    "name": "admin-panel",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@hookform/resolvers": "^2.7.0",     
        "@testing-library/jest-dom": "^5.12.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "bootstrap": "^4.6.0",
        "faker": "^5.5.3",
        "node-sass": "^4.14.1",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.0",
        "react-bootstrap-sweetalert": "^5.2.0",
        "react-data-table-component": "^6.11.7",
        "react-dom": "^17.0.2",
        "react-hook-form": "^7.12.2",
        "react-icons": "^4.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "styled-components": "^5.3.0",
        "web-vitals": "^1.1.2",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

我的预期结果是使用 reactjs 开发一个可排序的树。感谢您的帮助。

标签： reactjs