Блог

Главная - Вопросы по программированию - Как передать context consumer компоненту (Event.js ) отображается только маршрутизатором React?

Как передать context consumer компоненту (Event.js ) отображается только маршрутизатором React?

#javascript #reactjs #react-router #react-context

#javascript #reactjs #react-маршрутизатор #реагировать-контекст

Вопрос:

Мое приложение использует маршрутизатор React (Router.js ), Я пытаюсь реализовать CentralStore, используя Context API для передачи состояния в Event.js компонент, отображаемый маршрутизатором.

Как передать context consumer компоненту (Event.js ) отображается только маршрутизатором React? Прямо сейчас 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;

Комментарии:

1. вы импортировали AppContext ?

2. Я пытался импортировать его в Event.js в качестве импорта импортируйте AppContext из ‘.. / CentralStore’ — не работает. Я никуда не экспортирую AppContext. Я понятия не имею, как это импортировать.

3. Я экспортировал AppContext в компонент CentralStore, теперь у меня есть доступ к состоянию в Event.js файл — это хороший метод обработки ContextAPI с помощью маршрутизатора React?

Ответ №1:

Проблема была решена путем экспорта AppContext из компонента CentralStore

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