js中类成员可以用什么样的方式定义,好多地方都没有说明,今天调试一段代码正好又遇到了这个问题,代码如下:
import React from 'react'
import ReactDOM from 'react-dom'
import iScroll from 'iscroll'
import './example.css'
import ReactIScroll from 'react-iscroll'
const iScrollOptions = {
mouseWheel: true,
scrollbars: true,
scrollX: true
};
class JsPage extends React.Component {
constructor(props) {
super(props)
const list = [];
const len = 30;
for(let i = 0; i < len; i++) {
list.push(i+1)
}
this.state = {
y: 0,
isScrolling: false,
list: list,
lastId: len
}
}
onScrollStart = () => {
this.setState({isScrolling: true})
};
onScrollEnd = (iScrollInstance) => {
this.setState({isScrolling: false, y: iScrollInstance.y})
};
addRow = (ev) => {
ev.preventDefault()
const list = this.state.list,
newId = this.state.lastId + 1;
list.push(newId)
this.setState({list: list, lastId: newId})
};
removeRow = (ev) => {
ev.preventDefault()
const list = this.state.list;
list.shift()
this.setState({list: list})
};
onScrollRefresh = (iScrollInstance) => {
const hasVerticalScroll = iScrollInstance.hasVerticalScroll
if(this.state.canVerticallyScroll !== hasVerticalScroll) {
this.setState({canVerticallyScroll: hasVerticalScroll})
}
};
render() {
const listOfLi = [],
len = this.state.list.length;
let i = 0;
for(i; i < len; i++) {
listOfLi.push(<li key={i}>Pretty row {this.state.list[i]}<span className="beyond">I'm beyond</span></li>)
}
return (
<div>
<div id="header">
<button onClick={this.removeRow} className="button">Remove first row</button>
React iScroll component example
</div>
<div id="wrapper">
<ReactIScroll iScroll={iScroll}
options={iScrollOptions}
onRefresh={this.onScrollRefresh}
onScrollStart={this.onScrollStart}
onScrollEnd={this.onScrollEnd}>
<div style={{width: "110%"}}>
<ul>
{listOfLi}
</ul>
</div>
</ReactIScroll>
</div>
<div id="footer">
<button onClick={this.addRow} className="button">Add one row</button>
status: {this.state.isScrolling ? 'Scrolling' : 'Standby' } |
can vertically scroll: {this.state.canVerticallyScroll ? 'Yes' : 'No'}
</div>
</div>
)
}
}
export default JsPage;
报错信息如下:
ERROR in ./master/jsx/components/jspage.jsx
Module build failed: SyntaxError: C:/codes/ihotel/src/jspage.jsx: Unexpected token (34:18)
32 | }
33 |
> 34 | onScrollStart = () => {
| ^
35 | this.setState({isScrolling: true})
36 | };
37 |
类成员不能用箭头函数赋值吗?
成员函数这样声明就好了:
onScrollStart(){
this.setState({isScrolling: true});
}
注意,结尾也没有分号哦
确实不能用箭头函数,因为Arrow functions are always anonymous
像 render 那样写成成员函数不好吗?
或者:
name: ()=>{}
用到了ES类属性赋值的特性,需要安装相应的babel
npm install babel-preset-stage-0
webpack 配置
module: {
loaders: [
{
test: /\.(jsx|js)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-0']
}
}
]
}