Chtěl jsem použít ReactTags se svou aplikací React 16.12 podle pokynů zde - https://www.npmjs.com/package/react-tag-input . Nainstaloval jsem reakci 11.1.1. Níže je můj soubor 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
]
}
}
Snažím se takové značky implementovat
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;
ale při spuštění aplikace se setkám s níže uvedenou chybou
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
Nějaké myšlenky, jak to řešit? Možná komponenta již nefunguje s novějšími verzemi React?