reactjs - ReactTags 可以与 React 16.12 应用程序一起使用吗？

Question

我想按照此处的说明在我的 React 16.12 应用程序中使用 ReactTags -- https://www.npmjs.com/package/react-tag-input 。我安装了react-dnd 11.1.1。下面是我的 package.json 文件

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-device-detect": "^1.12.1",
    "react-dnd": "^11.1.1",
    "react-dnd-html5-backend": "^11.1.1",
    "react-dom": "^16.12.0",
    "react-hamburger-menu": "^1.2.1",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "react-tag-input": "^6.4.3",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我正在尝试像这样实现标签

import React from 'react';
import ReactDOM from 'react-dom';
import { WithContext as ReactTags } from 'react-tag-input';

const KeyCodes = {
  comma: 188,
  enter: 13,
};

const delimiters = [KeyCodes.comma, KeyCodes.enter];

class CoopTypes extends React.Component {
    constructor(props) {
        super(props);

        const tags = props.values.map(result => (
            {
                id: result.id,
                text: result.name
            }));
        this.state = {
            tags: tags,
            suggestions: props.values.map(result => ({
                id: result.id,
                text: result.name
            }))
        };
        this.handleDelete = props.handleDelete;
        this.handleAddition = props.handleAddition;
        this.handleDrag = this.handleDrag.bind(this);
    }

    handleDelete(i) {
        const { tags } = this.state;
        this.setState({
         tags: tags.filter((tag, index) => index !== i),
        });
    }

    handleAddition(tag) {
        this.setState(state => ({ tags: [...state.tags, tag] }));
    }

    handleDrag(tag, currPos, newPos) {
        const tags = [...this.state.tags];
        const newTags = tags.slice();

        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);

        // re-render
        this.setState({ tags: newTags });
    }

    render() {
        const { tags, suggestions } = this.state;
        return (
            <div>
                <ReactTags tags={tags}
                    suggestions={suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition}
                    handleDrag={this.handleDrag}
                    delimiters={delimiters} />
            </div>
        )
    }
};

export default CoopTypes;

但是当我启动我的应用程序时遇到以下错误

TypeError: (0 , _reactDnd.DragDropContext) is not a function
./node_modules/react-tag-input/dist-modules/components/ReactTags.js
node_modules/react-tag-input/dist-modules/components/ReactTags.js:538
  535 | };
  536 | 
  537 | module.exports = {
> 538 |   WithContext: (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend2.default)(ReactTags),
  539 |   WithOutContext: ReactTags,
  540 |   KEYS: _constants.KEYS
  541 | };
View compiled

对于如何解决这个问题有什么想法吗？也许该组件不再适用于较新的 React 版本？

Answer 1

react-tag-input 使用 react-dnd 中的 DragDropContext，即 deprecated in v8的react-dnd，因此您需要在应用程序中使用较低版本的react-dnd才能使其工作

您可以安装react-dnd和react-dnd-html5-backend的v7.6.2

"react-dnd": "^7.6.2",
"react-dnd-html5-backend": "^7.6.2",

Working Demo