React-dnd: НСпСрСхвачСнная ошибка: ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 1 июн. 2018  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: react-dnd/react-dnd

Здравствуй. Π― пытался Π½Π°ΠΉΡ‚ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ упоминания ΠΎΠ± этой ошибкС, Π½ΠΎ, ΠΊ соТалСнию, Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π±Ρ‹Π»ΠΎ Π½ΠΈ здСсь, Π½ΠΈ Π² сСти.

Π― Π½Π°Ρ‡Π°Π» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΈ Ρƒ мСня довольно простая настройка, ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ элСмСнт Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ эта ошибка:
http://prntscr.com/jpfale

Π­Ρ‚ΠΎ ΠΌΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ пСрСтаскивания:

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);

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, связанный с контСкстом:

export default DragDropContext(HTML5Backend)(App);

Π― ΡƒΠΆΠ΅ сдСлал ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ react-dnd, Π½ΠΎ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π²ΠΈΠΆΡƒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π’ΠΎΡ‚ ΠΌΠΎΠΉ package.json, Ссли эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ связана с ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ:

{
  "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"
  }
}

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠΌΠΎΠ³ΠΈΡ‚Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

@ andrew-farries, здСсь Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: ΠΎΠ΄Π½Π° Π½Π° нашСй сторонС, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΏΡ€Π΅Π΄ΠΈΠΊΠ°Ρ‚Π° Π΄Π°Π΅Ρ‚ сбой ΠΈ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΈΡ…ΠΈΠΌ сбоям.

Другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° находится Π½Π° вашСй сторонС - ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ref Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ дСскриптор элСмСнта DOM вашСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React SFC Π² качСствС DragSource, DropTarget ΠΈΠ»ΠΈ DragLayer - ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ классы, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰ΠΈΠ΅ React.Component.

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― Ρ‚ΠΎΠΆΠ΅ Π²ΠΈΠΆΡƒ эту ΠΎΡˆΠΈΠ±ΠΊΡƒ. Π’ΠΎΡ‚ ΠΎΡ‡Π΅Π½ΡŒ простая пСсочница, которая ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ:

https://codesandbox.io/s/5wm42wv5ol

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ошибка, описанная ОП.

Ошибка здСсь, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π΅ Π±Ρ‹Π» ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ Π² этот ΠΌΠΎΠΌΠ΅Π½Ρ‚, поэтому происходит ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ Π·Π°ΠΌΡ‹ΠΊΠ°Π½ΠΈΠ΅ Π±Π΅Π· Π²Ρ‹Π·ΠΎΠ²Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ beginDrag () спСцификации.

https://github.com/react-dnd/react-dnd/blob/c4bab9ac93e5a04d743b1267b325128392ce15b7/packages/react-dnd/src/createSourceFactory.ts#L93

@ andrew-farries, здСсь Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: ΠΎΠ΄Π½Π° Π½Π° нашСй сторонС, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΏΡ€Π΅Π΄ΠΈΠΊΠ°Ρ‚Π° Π΄Π°Π΅Ρ‚ сбой ΠΈ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΈΡ…ΠΈΠΌ сбоям.

Другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° находится Π½Π° вашСй сторонС - ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ref Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ дСскриптор элСмСнта DOM вашСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React SFC Π² качСствС DragSource, DropTarget ΠΈΠ»ΠΈ DragLayer - ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ классы, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰ΠΈΠ΅ React.Component.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ