如何将上下文使用者传递给仅由 React Router 呈现的组件（Event.js）？答案

【问题标题】：How to pass context consumer to Component (Event.js) rendered by React Router only?如何将上下文使用者传递给仅由 React Router 呈现的组件（Event.js）？
【发布时间】：2019-08-14 19:46:54
【问题描述】：

我的应用程序正在使用 React Router(Router.js)，我正在尝试使用 Context API 实现 CentralStore，以将状态传递给由 Router 呈现的 Event.js 组件。

如何将上下文消费者传递给仅由 React Router 呈现的组件（Event.js）？现在 AppContext 在 Event.js 中是未定义的。

直播代码：https://codesandbox.io/s/0x83zz0jmw

const AppContext = React.createContext();

class CentralStore extends React.Component {
  state={
    events: false,
  }

  componentDidMount() {
    firebase
      .collection("events")
      .get()      
      .then( querySnapshot => {
        const events = [];
        querySnapshot.docs.forEach(doc => {
          events.push(doc.data());
        });
        this.setState({
          events: events
        });
      });
  }

  render(){
    return(
      <AppContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </AppContext.Provider>
    )
  }
}


import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import App from '../App';
import EventCreator from './EventCreator';
import NotFound from './NotFound';
import Event from './Event';
import Events from './Events';
import CentralStore from '../CentralStore';

const Router = () => (
  <CentralStore>
    <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/create-event" component={EventCreator} />
      <Route path="/events/:eventId" component={Event} />
      <Route path="/events" component={Events} />
      <Route component={NotFound}/>
    </Switch>
    </BrowserRouter>
  </CentralStore> 
);

export default Router;

//

const Event = (props) => {
  console.log(props);
  return (
      <div className="event">
         <AppContext.Consumer>
          {(context) => (
            console.log(context)
          )}
        </AppContext.Consumer> */}
      </div>
  );
}

export default Event;

【问题讨论】：

你导入了AppContext 吗？
我尝试将它作为 import import AppContext from '../CentralStore' 导入 Event.js - 不工作。我没有在任何地方导出 AppContext。我不知道如何导入它。
我在 CentralStore 组件中导出了 AppContext，现在我可以访问 Event.js 文件中的状态，是用 React Router 处理 ContextAPI 的好方法吗？

标签： javascript reactjs react-router react-context

【解决方案1】：

通过从 CentralStore 组件导出 AppContext 解决了问题

// The missing export

export const AppContext = React.createContext();

class CentralStore extends React.Component {
  state={
    events: false,
  }

  componentDidMount() {
    firebase
      .collection("events")
      .get()      
      .then( querySnapshot => {
        const events = [];
        querySnapshot.docs.forEach(doc => {
          events.push(doc.data());
        });
        this.setState({
          events: events
        });
      });
  }

  render(){
    return(
      <AppContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </AppContext.Provider>
    )
  }
}

【讨论】：