我的反应应用程序中有一个HOC就是代码。
export function checkToken<Props>(WrappedComponent: new() => React.Component<Props, {}>) {
return (
class PrivateComponent extends React.Component<Props, LocalState> {
constructor() {
super();
this.state = {
isAuthed: false
}
}
async componentDidMount() {
let token = localStorage.getItem('dash-token');
let config = {
headers: { 'x-access-token': token }
}
let response = await axios.get(`${url}/users/auth/checkToken`, config)
if (!response.data.success) {
localStorage.removeItem('dash-token');
browserHistory.push('/login');
} else {
this.setState({isAuthed: true});
}
}
render() {
let renderThis;
if (this.state.isAuthed) {
renderThis = <WrappedComponent {...this.props} />
}
return (
<div>
{renderThis}
</div>
)
}
}
)
}
运行此应用时出现以下错误。
错误TS2698:只能从对象类型创建Spread类型。
当我传递道具{...this.props}
时,我的传播语法似乎存在问题。
这是我使用此HOC的地方。
const app = document.getElementById('root') as HTMLElement;
ReactDOM.render(
<Router history={browserHistory}>
<Route path={'/'} component={App}>
<IndexRoute component={checkToken(ListPage)} />
<Route path={'/terms-page/:id'} component={checkToken(TermsPage)} />
<Route path={'/default-settings'} component={checkToken(DefaultSettings)} />
<Route path={'/login'} component={LoginPage} />
<Route path={'/logout'} component={Logout} />
</Route>
</Router>
,app);
另外要明确这是编译时错误。
我哪里错了?