Salut. J'ai essayé de trouver des mentions de ce bogue, mais malheureusement rien n'était présent ici ou sur le web.
J'ai commencé un projet et j'ai une configuration assez simple et en essayant de faire glisser un élément, j'ai cette erreur:
http://prntscr.com/jpfale
Voici mon composant Drag:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { DragSource } from 'react-dnd';
const Container = styled.span`
margin: 10px;
font-size: 4rem;
text-transform: uppercase;
cursor: pointer;
transition: 0.4s;
&.is-clicked {
color: ${({ theme }) => theme.colors.purple};
}
&.is-hidden {
opacity: 0;
}
`;
const spec = {
beginDrag(props) {
console.log('test');
return {};
},
};
const WordItem = ({
children,
item,
isHidden,
handleClick,
connectDragSource,
}) => {
return connectDragSource(
<span>
<Container
className={item.clicked ? 'is-clicked' : isHidden}
onClick={handleClick}
>
{children}
</Container>
</span>,
);
};
WordItem.propTypes = {
children: PropTypes.string.isRequired,
item: PropTypes.objectOf(PropTypes.any).isRequired,
isHidden: PropTypes.string.isRequired,
handleClick: PropTypes.func.isRequired,
};
export default DragSource('word', spec, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
dropResult: monitor.getDropResult(),
canDrag: monitor.canDrag(),
}))(WordItem);
Conteneur connecté au contexte:
export default DragDropContext(HTML5Backend)(App);
J'ai déjà fait un projet avec react-dnd, mais c'est la première fois que je vois ce problème. Voici mon package.json si ce problème peut être lié à la compatibilité des bibliothèques:
{
"name": "",
"version": "1.0.0",
"description": "npm i -g prettier",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"dev": "cross-env NODE_ENV=development node devServer.js",
"build": "npm run clean && cross-env NODE_ENV=production webpack --config=webpack.build.config.js -p && node productionServer.js",
"flow": "flow"
},
"author": "",
"license": "ISC",
"browserslist": [
"last 5 versions",
"not ie < 11"
],
"prettier": {
"singleQuote": true,
"trailingComma": "all"
},
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-styled-components": "^1.5.1",
"es6-promise": "^4.2.4",
"prop-types": "^15.6.1",
"rc-slider": "^8.6.1",
"react": "^16.3.2",
"react-dnd": "^3.0.2",
"react-dnd-html5-backend": "^3.0.2",
"react-dom": "^16.3.2",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0",
"styled-components": "^3.2.6",
"svg-inline-loader": "^0.8.0",
"xml2js": "^0.4.19"
},
"devDependencies": {
"autoprefixer": "^8.3.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"browserslist": "^3.2.4",
"compression-webpack-plugin": "^1.1.11",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"flow-bin": "^0.70.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.2.0",
"node-sass": "^4.8.3",
"postcss-loader": "^2.1.4",
"prettier-eslint": "^8.8.1",
"react-hot-loader": "^4.0.0",
"rimraf": "^2.6.2",
"sass-loader": "^7.0.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-middleware": "^3.1.2",
"webpack-hot-middleware": "^2.22.1"
}
}
Veuillez aider à résoudre ce problème.
Je vois également cette erreur. Voici un bac à sable très simple qui montre le problème:
https://codesandbox.io/s/5wm42wv5ol
Dès que vous essayez de faire glisser la carte, l'erreur décrite par l'OP se produit.
L'erreur est là, il semble que le composant n'a pas été reçu à ce stade, donc cela court-circuite sans appeler la fonction beginDrag () de la spécification.
@ andrew-farries, il y a deux problèmes ici: l'un est de notre côté, une vérification de prédicat échoue et entraîne des échecs silencieux.
L'autre problème est de votre côté - parce que nous utilisons ref
pour obtenir une poignée sur l'élément DOM de votre composant, vous ne pouvez pas utiliser un React SFC comme DragSource, DropTarget ou DragLayer - ils doivent être classes qui étendent React.Component.
Commentaire le plus utile
@ andrew-farries, il y a deux problèmes ici: l'un est de notre côté, une vérification de prédicat échoue et entraîne des échecs silencieux.
L'autre problème est de votre côté - parce que nous utilisons
ref
pour obtenir une poignée sur l'élément DOM de votre composant, vous ne pouvez pas utiliser un React SFC comme DragSource, DropTarget ou DragLayer - ils doivent être classes qui étendent React.Component.