javascript - 路线内的 react 上下文

Question

我正在尝试获取 React Route 中的上下文变量。这是我的代码

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/home/:loc" render={(props)=> {
      <AppContext.Consumer>
        {
          context=><Home context={context} />
        }
      </AppContext.Consumer>

    }} />
</Switch>

这是我的 AppContext.js

import React from 'react';

export const AppContext = React.createContext();

这就是我设置上下文的方式

 <AppContext.Provider value={this.state}>
        <div className="App">
          <Header />
          <Content />
          <Footer />
        </div>
      </AppContext.Provider>

这是我遇到的错误

Expected an assignment or function call and instead saw an expression no-unused-expressions

知道这里出了什么问题吗？

Answer 1

Expected an assignment or function call and instead saw an expression no-unused-expressions

不是错误，而是 linter 警告。 no-unused-expressions 规则通常表示由于开发人员的错误，代码可能无法按预期工作。

已发布代码的问题是 render 箭头函数不返回任何内容。

应该是:

<Route path="/home/:loc" render={(props)=> (
  <AppContext.Consumer>
    {
      context=><Home context={context} />
    }
  </AppContext.Consumer>

)} />

=> {...}需要显式返回，而=> (...)是隐式返回。