javascript - 与打字稿反应:“历史”类型上不存在属性“推送”
问题描述
我试图通过推入历史对象来远离视图。但是,当我尝试将路由推入其中时,会收到一条错误消息:
“历史”类型上不存在属性“推送”。
render(){
return (
<div className="loginWrapper">
withRouter(({history}) => (<button onClick={()=>{history.push('/home')}} className="btn btn-primary">Pieteikties</button>))
</div>
)
}
我能做些什么来解决这个问题?
编辑:
我也试过这个:
logIn(){
this.props.history.push('/new-location')
}
使用这样的组件:
render(){
return (
<div className="loginWrapper">
<button onClick={this.logIn} className="btn btn-primary">Pieteikties</button>
</div>
)
}
它没有用。
解决方案
更新:我找到了一种新方法来做这种事情。与 b4 相同,您需要安装它们类型:
1.-npm i react-router react-router-dom
2.-npm i -D @types/react-router @types/react-router-dom
import React from "react";
import { RouteComponentProps } from "react-router-dom";
interface MyComponentProps extends RouteComponentProps {
someOfYourOwnProps: any;
someMorePropsIfNeedIt: any;
}
interface MyComponentState {
someProperty: any;
another: any;
}
export class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
public state: MyComponentState;
public constructor (props: MyComponentProps) {
super(props);
this.state = {
someProperty: "",
another: ""
}
}
public onClickHandler (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
evt.preventDefault();
}
public componentDidMount () {
this.props.history;
}
public render (): React.ReactElement<MyComponentProps> {
return (
<div>trol</div>
)
}
}
hihitl 我知道发生了什么。希望你还需要它。
1.-npm i react-router react-router-dom
2.-npm i -D @types/react-router @types/react-router-dom
import React from "react";
import { History, LocationState } from "history";
interface MyComponentProps {
someOfYourOwnProps: any;
history: History<LocationState>;
someMorePropsIfNeedIt: any;
}
然后在你的组件上,如果它是一个类
class MyComponent extends Component<MyComponentProps, {}> {}
如果它是功能性的
const MyComponent = (props: MyComponentProps) => {}
推荐阅读
- php - 在 Laravel 中显示时区名称
- vba - VBA 在命名范围上尝试求和函数时出现运行时错误
- python - 访问类型为 Union 的变量的属性会引发错误
- javascript - 在 ReactJS 中,如何在迭代非浅层数据结构时最好地组织我的代码
- javascript - 在新窗口中打开图像出现javascript的空白页面
- laravel-5 - Laravel 和 Vue.js API 文件上传不起作用
- java - Socket java 向服务器传输一个位串。StringBuilder 转移
- android - Android API 28 和 Roboelectric 4.0-alpha-3 抛出 Realm lib 错误
- angularjs - 引导工具提示:如果绑定变量值为空,则隐藏工具提示
- youtube - Youtube API - 来自频道统计的视频数量与上传的视频数量之间的差异