先上代码:
react V16; typescript V3.2.2
import * as actionCreators from './store/actionCreators';
import * as React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';
import {connect} from "react-redux";
import {
Addition,
Button,
HeaderWrapper,
Logo,
Nav,
NavItem,
NavSearch,
SearchInfo,
SearchInfoItem,
SearchInfoList,
SearchInfoSwitch,
SearchTitle,
SearchWrapper
} from './style';
// interface IHeaderState {
// focused: boolean
// }
interface IHeaderProps {
focused: boolean,
handleInputFocus(list: object): void,
handleInputBlur(): void,
list: any
}
class Header extends React.Component<IHeaderProps, {}> {
private spinIcon: React.RefObject<any>;
constructor(props: any) {
super(props);
// this.state = {focused: false};
this.spinIcon = React.createRef();
}
public render() {
const {focused, handleInputFocus, handleInputBlur, list} = this.props;
return (
<HeaderWrapper>
<BrowserRouter>
<Link to='/'>
<Logo/>
</Link>
</BrowserRouter>
<Nav>
<NavItem className={'left'}>
首页
</NavItem>
<NavItem className={'left'}>
下载app
</NavItem>
<BrowserRouter>
<Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
</BrowserRouter>
{/*{
login ?
<NavItem className={'right'} onClick={logout} style={{'cursor':'pointer'}}>退出</NavItem> :
<Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
}*/}
<NavItem className={'right'}>
<i className="iconfont"></i>
</NavItem>
<SearchWrapper>
<NavSearch
className={focused ? 'focused' : ''}
onFocus={() => handleInputFocus(list)}
onBlur={handleInputBlur}
/>
<i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}></i>
<SearchInfo>
<SearchTitle>
热门搜索
</SearchTitle>
<SearchInfoSwitch>
<i ref={this.spinIcon} className="iconfont spin"></i>
换一批
</SearchInfoSwitch>
<SearchInfoList>
{/*{pageList}*/}
<SearchInfoItem>lala</SearchInfoItem>
</SearchInfoList>
</SearchInfo>
</SearchWrapper>
</Nav>
<Addition>
<BrowserRouter>
<Link to='/write'>
<Button className={'writting'}>
<i className="iconfont"></i>
写文章</Button>
</Link>
</BrowserRouter>
<Button className={'reg'}>注册</Button>
</Addition>
</HeaderWrapper>
)
}
}
const mapStateToProps = (state: any) => {
return{
focused: state.get('focused'),
list: state.get('list'),
page: state.getIn('page'),
totalPage: state.getIn('totalPage'),
}
};
const mapDispatchToProps = (dispatch: any) => ({
handleInputFocus(list:any){
if (list.size === 0) {
dispatch(actionCreators.getList());
}
dispatch(actionCreators.searchFocus());
},
handleInputBlur(){
dispatch(actionCreators.searchBlur())
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);
报错信息 :
(29,5): Declaration of public instance field not allowed after declaration of public instance method. Instead, this should come at the beginning of the class/interface.
这该如何解决啊?
ps:tslint.json配置文件是默认的create-react-app脚手架typescript版本自带的,也是苦唧唧的找不到从哪引入的配置文件
tslint.json文件:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"ordered-imports": false
}
}
......前面代码
......后面代码