React Dragula出现“无法编译”和“意外”错误

Question

我一直在尝试实现React Dragula (链接：https://github.com/bevacqua/react-dragula)，但总是出现错误，因为我确信我的语法是不正确的。有人能告诉我我哪里做错了吗？

我所要做的就是让下面的<div>变成一个可排序的拖放列表(事实证明这比我预想的要难得多)。React DND是一种选择，但是我遇到了相当多的问题，这似乎更简单一点。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Icon} from 'react-fa';
import { Row, Col } from 'react-flexbox-grid';
import styled from 'styled-components';
import Dragula from 'react-dragula';

const style = {
  cursor: 'move',
};


const CountCell = styled.div`
  border: 1px solid #5C57B1;
  background: #6E68C5
  width: 320px;
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
`

const Score = styled.span`
  color: #74D8FF;
  font-size: 26px;
  font-weight: bold;
  padding: 0 0.5em;
  display: inline-block;
  width: 30px;
  text-align: center;
`
const ScoreName = styled.span`
  color: white;
  font-size: 20px;
  padding: 0 0.5em;
  display: inline-block;
  width: 160px;
  text-align: center;
`

const CountButton = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #6E68C5;
  height: 30px;
  border: 0;
  border-radius: 50px;
  border: 3px solid white;
  width: 30px;
  transition: all 250ms;
  &:focus {outline:0;}
  &:hover {background: white;}
`

class Counter extends Component {

  incrementCount(e) {
    // I need to update the current state's count, and add 1 to it.
    this.setState({
      count: (this.state.count + 1),
    })
  }

  decrementCount(e) {
    this.setState({
      count: (this.state.count - 1),
    })
  }


  render() {
    const { count } = this.props
    const { decrementCount } = this.props
    const { incrementCount } = this.props
    const { nameof } = this.props
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
    const opacity = isDragging ? 0 : 1;
    return (
      <div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
          <CountCell>
            <Row style={{alignItems: 'center'}}>
              <Col>
                <CountButton
                  onClick={incrementCount}>
                  <Icon
                    name="icon" className="fa fa-plus score-icon"
                  />
                </CountButton>
              </Col>
              <Col >
                <ScoreName>{nameof}</ScoreName>
              </Col>
              <Col >
                <Score>{count}</Score>
              </Col>
              <Col>
                <CountButton
                  onClick={decrementCount}>
                  <Icon
                  name="icon" className="fa fa-minus score-icon"
                  />
                </CountButton>
              </Col>
            </Row>
          </CountCell>
        </div>
      )
    }
  }

Counter.propTypes = {
  // We are going to _require_ a prop called "count". It _has_ to be a Number.
  count: PropTypes.number.isRequired,

  // We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
  incrementCount: PropTypes.func.isRequired,

  // We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
  decrementCount: PropTypes.func.isRequired,

  nameof: PropTypes.string.isRequired,
},
componentDidMount: function () {
  var container = React.findDOMNode(this);
  dragula([container]);
}
});

export default Counter

我得到的错误是：

./src/components/pages/projectpages/dnd2/Counter.js
Syntax error: Unexpected token, expected ; (127:17)

  125 |   nameof: PropTypes.string.isRequired,
  126 | },
> 127 | componentDidMount: function () {
      |                  ^
  128 |   var container = React.findDOMNode(this);
  129 |   dragula([container]);
  130 | }

Answer 1

你的组件应该是这样的吗？

import Dragula from 'react-dragula';

class Counter extends Component {

    incrementCount(e) {
        // I need to update the current state's count, and add 1 to it.
        this.setState({
            count: (this.state.count + 1),
        })
    }

    decrementCount(e) {
        this.setState({
            count: (this.state.count - 1),
        })
    }
    render() {
        const { count } = this.props
        const { decrementCount } = this.props
        const { incrementCount } = this.props
        const { nameof } = this.props
        const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
        const opacity = isDragging ? 0 : 1;
        return (
            <div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
                <CountCell>
                    <Row style={{ alignItems: 'center' }}>
                        <Col>
                            <CountButton
                                onClick={incrementCount}>
                                <Icon
                                    name="icon" className="fa fa-plus score-icon"
                                />
                            </CountButton>
                        </Col>
                        <Col >
                            <ScoreName>{nameof}</ScoreName>
                        </Col>
                        <Col >
                            <Score>{count}</Score>
                        </Col>
                        <Col>
                            <CountButton
                                onClick={decrementCount}>
                                <Icon
                                    name="icon" className="fa fa-minus score-icon"
                                />
                            </CountButton>
                        </Col>
                    </Row>
                </CountCell>
            </div>
        )
    }
    dragulaDecorator = (componentBackingInstance) => {
        if (componentBackingInstance) {
            let options = {};
            Dragula([componentBackingInstance], options);
        }
    };
}

Counter.propTypes = {
  // We are going to _require_ a prop called "count". It _has_ to be a Number.
  count: PropTypes.number.isRequired,

  // We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
  incrementCount: PropTypes.func.isRequired,

  // We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
  decrementCount: PropTypes.func.isRequired,

  nameof: PropTypes.string.isRequired,
}

export default Counter;

https://codesandbox.io/s/N9k0K0Lpp