Reactjs - 拖放（react-dnd）故障排除答案

【问题标题】：Reactjs - Drag and Drop (react-dnd) troubleshotReactjs - 拖放（react-dnd）故障排除
【发布时间】：2017-05-08 04:36:36
【问题描述】：

我有这样编码的 reactjs 测试项目。

    import React, { Component, PropTypes } from 'react';
    import { DragDropContext } from 'react-dnd';
    import HTML5Backend from 'react-dnd-html5-backend';

    import Square from './Square';
    import Knight from './Knight';
    import { moveKnight } from './Game';
    import { canMoveKnight, moveKnight } from './Game';

    @DragDropContext(HTML5Backend)
.....

但是当我运行代码时，我得到了以下错误。

Failed to compile.

Error in ./src/Board.js
Syntax error: Unexpected token (11:0)

   9 | import { canMoveKnight, moveKnight } from './Game';
  10 | 
> 11 | @DragDropContext(HTML5Backend)
     | ^
  12 | 
  13 | export default class Board extends Component {
  14 |   static propTypes = {

 @ ./src/index.js 16:13-31

如果您对 react-dnd 和 react-dnd-html5-backend 有丰富的经验，请帮我解决这个问题。谢谢。

【问题讨论】：

标签： javascript reactjs drag-and-drop react-dnd

【解决方案1】：

看起来你的装饰器没有被 Babel 处理（我假设你正在使用 Babel/Webpack）。您需要安装babel-plugin-transform-decorators 插件，如果您需要旧的行为，则需要安装babel-plugin-transform-decorators-legacy。

【讨论】：