javascript - TypeScript - ReactRouter | Arrow function captures the global value of 'this' which implicitly has

admin管理员组

文章数量:1289759

I'm rendering a ponent via React Router 4 using render={() => </Component />}

I need to pass state to the given ponent i.e: <Game />

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

To which TS breaks saying:

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

The final goal is to be able to pass the Routes to my main app: 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>
      )
  }
}

How could I apply the correct types to suppress this TypeScript error?

I'm rendering a ponent via React Router 4 using render={() => </Component />}

I need to pass state to the given ponent i.e: <Game />

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

To which TS breaks saying:

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

The final goal is to be able to pass the Routes to my main app: 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>
      )
  }
}

How could I apply the correct types to suppress this TypeScript error?

• javascript
• reactjs
• typescript
• react-router

Share Improve this question Follow asked Jan 14, 2019 at 16:54 Jonca33Jonca33 3,49377 gold badges2828 silver badges3939 bronze badges 4

• If you are using the arrow function in an export const who do you expect this to be ? – Titian Cernicova-Dragomir Commented Jan 14, 2019 at 16:56
• Have you looked into the bind function previously? – JO3-W3B-D3V Commented Jan 14, 2019 at 16:57
• I take this would belong to const Routes, which is why is the error? How could I remedy that? I'm still pretty raw. – Jonca33 Commented Jan 14, 2019 at 17:00
• I suggest getting familiar with this in JS - developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Älskar Commented Jan 14, 2019 at 17:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Arrow functions do not have lexical contexts, so any invocation of this inside the body of an arrow will degenerate to its value in the outer scope. This is what TS is plaining about.

For your problem of passing the state around you need to pass this as a prop to the Routes ponent which will dispatch it to the relevant route.

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} ponent={Home} />
    <Route path="/play-game" render={() => <Game {...state} />} />
    <Redirect to="/" />
  </Switch>
)

本文标签：