访问组件外部的 React 上下文

Posted 2023-03-08

【中文标题】访问组件外部的 React 上下文

【英文标题】：Access React context outside of component

【发布时间】：2019-06-08 10:18:29

【问题描述】：

我正在使用 React 上下文来存储 NextJS 网站（例如 example.com/en/）的语言环境。设置如下所示：

components/Locale/index.jsx

import React from 'react';

const Context = React.createContext();
const  Consumer  = Context;

const Provider = ( children, locale ) => (
  <Context.Provider value= locale >
    children
  </Context.Provider>
);

export default  Consumer, Provider ;

pages/_app.jsx

import App,  Container  from 'next/app';
import React from 'react';

import Locale from '../components/Locale';


class MyApp extends App 
  static async getInitialProps( Component, ctx ) 
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;
    const locale = ctx.asPath.split('/')[1];
    return  pageProps, locale ;
  

  render() 
    const 
      Component,
      locale,
      pageProps,
     = this.props;

    return 
      <Container>
        <Locale.Provider locale=locale>
          <Component ...pageProps />
        </Locale.Provider>
      </Container>
    ;
  

到目前为止一切顺利。现在，在我的一个页面中，我通过 getInitialProps 生命周期方法从 Contentful CMS API 获取数据。有点像这样：

pages/index.jsx

import  getEntries  from '../lib/data/contentful';

const getInitialProps = async () => 
  const  items  = await getEntries( content_type: 'xxxxxxxx' );
  return  page: items[0] ;
;

在这个阶段，我需要使用语言环境进行此查询，因此我需要访问上述getInitialProps 中的Local.Consumer。这可能吗？

【问题讨论】：

请问你最后是怎么解决的？我面临着一个非常相似的挑战。

【参考方案1】：

根据此处的文档，这似乎是不可能的：https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle 您可以通过将组件包装在上下文的 Consumer 中来访问 React 上下文数据，如下所示：

<Locale.Consumer>
  (locale) => <Index locale=locale />
</Locale.Consumer>

但 getInitialProps 是针对***页面运行的，并且无法访问道具。

你能在另一个 React 生命周期方法中获取你的条目吗，比如 componentDidMount? 然后您可以将您的项目存储在组件状态中。