Как автоматически передать props через Context во всем приложении? (React js)

Question

Попытаюсь описать свой вопрос более подробно... Я хочу сделать так, чтобы в моем приложении язык грузился из Redux store. Могу прокинуть пропсы через mapStateToProps , но так придется делать в каждом компоненте - не подходит. Думал реализовать через НОС, но тоже надо каждый компонент оборачивать в него - не подходит. Пришла мысль использовать Context.Consumer, но и тут надо каждый элемент оборачивать в него - тоже не подходит.

Не могли бы помочь, есть ли какая-то возможность обернуть лишь App.js в НОС или Context, чтобы пропсы автоматически передавались в дочерние компоненты?

вот index.js

ReactDOM.render(
  <Provider store={store}>
    <Context.Provider value={servise}>
      <Router>
        <App />
      </Router>
    </Context.Provider>
  </Provider>,
  document.getElementById("root")
);

Вот компонент App.js

return (
    <ThemeProvider theme={themeChanging}>
      <ScrollToTop />
      <div className={classes.root}>
        <CssBaseline />
        <Dashbord theme={theme} classes={classes} switchTheme={switchTheme} />
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            <Route path="/adminLogin" component={Login} />
            <Route path="/" exact component={About} />
            <Route path="/portfolio" component={Portfolio} />
            <Route path="/service" component={Service_page} />
            <Route path="/resume" component={Resume_page} />
            <Route path="/contacts" component={Contacts_page} />
          </Switch>
        </main>
      </div>
    </ThemeProvider>
  );

Answer 1

Так собственно в чём проблема?

В App.js:

export AppContext = React.createContext({ lang: 'en' });

// ....
<AppContext.Provider value={{ lang: 'ru' }}>
   // ....
</AppContext.Provider>

А в самих компонентах:

import { useContext } from 'react';
import { AppContext } from '../../App';

// ...

const MyComponent = () => {
  const { lang } = useContext(AppContext);

  return (
     <div>{lang}</div>
  );
};

БЛОГ НА HUSL

Как автоматически передать props через Context во всем приложении? (React js)

Ответы (1 шт):