this.props.history.push使用流失败的反应类型检查

Question

我正在使用React中的流进行类型检查。我在以下情况下遇到错误，如何处理this.props.history.push（'/ home'）如何在道具中定义它？我已经尝试过下面的方法，但是它不起作用，

type Prop = { onLoginSuccess: function, setContextDetails: function, callErrorLogger: function, history:string, push:string }; 
type State = { username: string, password: string, loginsuccess: bool, isLoading: bool }; 
class Login extends React.Component<Prop, State> {
// here I have some code
this.props.history.push('/home') ;
 } 

Answer 1

我清理了您的一些代码和类型，以针对流语法更正确。但这应该可行。

您基本上以与普通对象相同的方式定义history类型，并且push函数可以用Function声明，也可以使用我下面使用的箭头函数语法更严格地声明。

type Prop = {
  onLoginSuccess: Function,
  setContextDetails: Function,
  callErrorLogger: Function,
  history: {
    push: (string) => void,
  },
};

type State = {
  username: string,
  password: string,
  loginsuccess: boolean,
  isLoading: boolean,
};

class Login extends React.Component<Prop, State> {
  // here I have some code
  onClick() {
    this.props.history.push('/home');
  }
} 

这里是一个尝试流程，您可以查看实际的输入内容。https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQdMAnmFnAArFhwC8cA3nThwIAOwAyEAObBRAZQCuuXFlSoAXHABiC0fmBiANELiosMAMJiYWAB4wAIueTAANhu279Rk7mSvXAFEoYihJKSksKE0dPRgDUWNhAAtgVBhoJk1BYWEwBVRkzQAKdKhZKQBKXgA+OAA3CGAAEyS4AF9jdvpGFjY5GGQbXgETAqjRZBAsTTKKtrA0VAB3aGbZmHLRKTbXaVlUJRU1TQAjCAhXHESTNMlkZoqzi6vkG+6hOlxXJbhw2Tgdhsoma6GweBgADorOAxFhRDAADycCBgQxwAZDLB1HJwAD0eLgySibAAkkTkPU2KgSGxcBBmlgTGILK5gLgANbFaq44QwVKoSFgLiCgUZKBMIUFZLFMh45K0siVejCdp0dpwIA

[我也建议以后将您的帖子标记为flowtype，这会获得更多帮助。