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

Question

我的应用程序正在使用 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;

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

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

How to pass context consumer to Component (Event.js) rendered by React Router only?

javascript

reactjs

react-router

react-context