TypeScript - ReactRouter | Функция стрелки фиксирует глобальное значение «this», которое неявно имеет тип «any»

Question

Я рендерил компонент через React Router 4, используя render={() => </Component />}

Мне нужно передать состояние данному компоненту, т.е.: <Game />

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

На что ТС нарушает поговорку:

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

Конечная цель - передать Routes моему основному приложению: i.e:

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?

Answer 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>
)