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>

这是我得到的错误

期望分配或函数调用，而看到一个表达式no-unused-expressions

有什么想法吗？

Answer 1

期望分配或函数调用，而看到一个表达式no-unused-expressions

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

已发布代码的问题在于，render箭头功能未返回任何内容。

应该是：

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

)} />

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

在Route中反应上下文

1 个答案: