reactjs - 对 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') ;
 } 

标签： reactjsflowtype

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以便获得更多帮助。