- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试实现 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 | }
最佳答案
你的组件应该是这样的吗?
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;
关于javascript - React Dragula 给出 "Failed to compile"和 "unexpected"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44784705/
一旦在 qconsole Marklogic 中运行以下代码,我就会遇到以下错误 XDMP-UNEXPECTED: (err:XPST0003) Unexpected token syntax err
我已经在我的包中编写了这个函数。 def partitionIntoDays(ls, number, lookupKey=None): ''' Partitions the location
我只是一个 android 初学者,我已经安装了 Android Studio(版本是 1.0.2),并创建了一个新的空白应用程序,按照名为“构建你的第一个应用程序”的官方教程,我学习到这个页面' h
这只是前几天工作,但我刚刚将我的代码更新到运行乘客 2.2.4 的审查服务器,而我的 2.3.4 rails 应用程序现在无法在那个盒子上启动。 乘客报告: Passenger encountered
我正在尝试使用带有 Angular 2的整页, 将其导入我的 app.module.ts 时出现以下错误。 "(SystemJS) Unexpected token ) at Obje
TFS2015 vNext 构建失败并出现记录器错误(下面附有错误消息)。根据我的调查,这看起来与 CentralLogger - "Microsoft.TeamFoundation.Distribu
计算机科学学校项目。我需要编写一个程序,其中用户声明数组的大小,然后以数字、非递减顺序填充数组,然后声明一个值 x。然后将 X 分配到适当的位置,以便整个数组按数字、非递减顺序排列。然后输出该数组。
在这 2 个方法中,inspect1 显示编译错误“Unexpected bound”而 inspect2 工作正常,为什么? public void inspect1(List u){ S
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我正在尝试运行以下代码,但遇到了“此时意外”错误。 (echo COPY (SELECT ta.colA as name, ta.colB as user_e, ta.colC as user_n,
我有以下查询: select u.UserName, count(*) as total from Voting v join User u using (UserID) where unique (
我们有以下查询在 MSSQL 中完美运行但在 MySQL 中无法运行: select CONVERT(datetime, dateVal) as DateOccurred, itemID, COUNT
我的代码中存在缩进错误问题。它看起来是正确的...有人能指出我做错了什么吗?我的查询行不断收到错误。 def invoice_details(myDeliveryID): conn = pym
我有以下代码: int a , b , sum; cin>>a>>b; sum=a+b; cout>a>>b>>c; cout<
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我在一个批处理文件上运行这个命令: for %I in (*.txt *.doc) do copy %I c:\test2 ...它不断返回: I was unexpected at this tim
创建查询时出现错误: 'from' unexpected 我的代码如下: @Override public Admin findByAdmin(Admin admin) {
我正在尝试运行此 python 代码,但我不断收到错误消息“意外缩进”。我不确定怎么了。间距似乎很好。有什么想法吗? services = ['Service1'] for service in
我在名为“circular_dependency”的目录中有一些 python 文件: 导入文件_1.py: from circular_dependency.import_file_2 import
我正在尝试使用 gcc 编译代码并运行可执行文件,但它抛出错误: gcc somefile.c -o somefile 编译成功。但是,当我尝试执行它时: $sh somefile 它导致:语法错误:
我是一名优秀的程序员,十分优秀!