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

Question

我正在尝试在我的 class 上添加 @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 Uncaught Error: Expected the backend to be a function or an ES6 module exporting a default function. Read more: 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 预设？

我的 "transform-decorators-legacy" 还能用吗？

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 组件

How to decorate my React component correctly when exporting the module

reactjs

webpack

react-dnd