Question

我正在尝试在我的类上添加@DragDropContext装饰器，但是当我在浏览器中加载它时出现错误。

我的组件如下：

import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';

@DragDropContext(HTML5Backend)

class UserShowView extends React.Component {

}

export default connect(mapStateToProps)(UserShowView);

这是Chrome控制台中的错误：

bundle.js：977未捕获错误：期望后端成为函数或导出默认功能的ES6模块。阅读更多： http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

我的babelrc文件：

{
  "plugins": ["transform-decorators-legacy"],
  "presets": ["react", "es2015", "stage-0"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

packages.json：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node tools/srcServer.js",
    "test": "NODE_ENV=test jest",
    "lint": "eslint --max-warnings=0 src test",
    "test:watch": "NODE_ENV=test jest --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-display-name": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "colors": "^1.1.2",
    "compression": "^1.7.1",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "eslint-watch": "^3.1.3",
    "express": "^4.16.2",
    "jest": "^22.0.6",
    "node-sass": "^4.7.2",
    "npm-run-all": "^4.1.2",
    "redux-devtools": "^3.4.1",
    "sass-loader": "^6.0.6",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.10.1",
    "webpack-hot-middleware": "^2.21.0"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "history": "^4.7.2",
    "lodash": "^4.17.5",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

}

我做错了什么或者我错过了一个babel预设？

我的＃34; transform-decorators-legacy＆＃34;甚至工作？

Answer 1

如错误消息所示，@DragDropContext(HTML5Backend)正在等待模块或功能。

从documentation您应该导入HTML5Backend模块： import HTML5Backend from 'react-dnd-html5-backend';

因为你正在使用 import { HTML5Backend } from 'react-dnd-html5-backend';

您正尝试导入一个不存在的特定导出，因此DragDropContext显示错误。

使用大括号导入是针对特定导出而不是大括号，用于默认导出。

参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import 有关导入模块和功能的不同方法的更多信息。

Answer 2

只需移除HTML5Backend周围的花括号

即可

import HTML5Backend from 'react-dnd-html5-backend';

http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html#usage

如何在导出模块时正确装饰我的React组件

2 个答案: