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

你的组件应该是这样吗？

fields= {1 : "not", 2 : "not", 3 : "not",
         4 : "not", 5 : "not", 6 : "not",
         7 : "not", 8 : "not", 9 : "not"} 
for i in fields:
print(i)
if i%3==0:
    print ("\n")

https://codesandbox.io/s/N9k0K0Lpp

React Dragula给出＆＃34;编译失败＆＃34;和＆＃34;意想不到的＆＃34;错误

1 个答案: