TypeScript - ReactRouter |箭头函数捕获隐含类型为“any”的“this”的全局值

Posted 2023-02-21

【中文标题】TypeScript - ReactRouter |箭头函数捕获隐含类型为“any”的“this”的全局值

【英文标题】：TypeScript - ReactRouter | Arrow function captures the global value of 'this' which implicitly has type 'any'

【发布时间】：2019-06-08 16:47:42

【问题描述】：

我正在使用 render=() => </Component /> 通过 React Router 4 渲染一个组件

我需要将状态传递给给定的组件，即：<Game />

export const Routes: React.SFC<> = () => (
  <Switch>
    <Route path="/" exact=true component=Home />
    <Route path="/play-game" render=() => <Game ...this.state /> />
    <Redirect to="/" />
  </Switch>
)

TS 中断说：

The containing arrow function captures the global value of 'this' which implicitly has type 'any'

最终目标是能够将Routes 传递给我的主应用程序：即：

export default class App extends Component<, AppState> 
  public state = 
    // state logic
  

  public render(): JSX.Element 
      return (
        <BrowserRouter>
          <div className="App">
            <Navigation />
            <Routes />
          </div>
        </BrowserRouter>
      )
  

如何应用正确的类型来抑制这个 TypeScript 错误？

【问题讨论】：

如果您在export const 中使用箭头函数，您希望this 是谁？

你之前看过bind函数吗？

我取this 会属于const Routes，这是为什么会报错？我该如何补救？我还是很原始。

我建议熟悉 JS 中的 this - developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案1】：

箭头函数没有词法上下文，因此在箭头主体内对this 的任何调用都将退化为其在外部范围内的值。这就是 TS 所抱怨的。

对于传递状态的问题，您需要将此作为道具传递给Routes 组件，该组件会将其分派到相关路由。

export default class App extends Component<, AppState> 
  public state = 
    // state logic
  

  public render(): JSX.Element 
      return (
        <BrowserRouter>
          <div className="App">
            <Navigation />
            <Routes state=this.state/>
          </div>
        </BrowserRouter>
      )
  


// you need to pass the correct type to React.SFC<>
// probably something along React.SFC< state: State >
// where State is the type of `state` field in App.
export const Routes: React.SFC<...> = ( state ) => (
  <Switch>
    <Route path="/" exact=true component=Home />
    <Route path="/play-game" render=() => <Game ...state /> />
    <Redirect to="/" />
  </Switch>
)

【讨论】：

非常感谢，我刚刚在where State is the type of state field in App. 上失去了你，现在我得到一个`找不到名字状态'

我的意思是 Routes 组件的签名可能不正确，应该是 React.SFC< state: AppState >，因为它接收到一个名为 state 的道具，该道具与 state 中的字段类型相同App 组件。您的 Game 组件也应该反映这一点。在研究这一点时，我还偶然发现了此签名的弃用通知，在 hooks api 可能是 github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/… 的公告之后。

感谢您回复我。我也会继续阅读这个主题。