代码之家 › 专栏 › 技术社区 › CaribouCode

访问组件外部的反应上下文

contentful next.js localization reactjs

1

CaribouCode · 技术社区 · 6 年前

我使用React context来存储NextJS网站的语言环境(例如example.com/en/)。安装程序如下所示:

组件/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 };

页面/u 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 生命周期方法。有点像这样:

页面/索引.jsx

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

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

在此阶段,我需要使用区域设置进行此查询,以便访问 Local.Consumer 在上面 getInitialProps . 这可能吗?

0 回复 | 直到 6 年前

1

Gordon Burgett 5 年前

根据这里的文档,这似乎是不可能的: https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle 通过将组件包装到上下文的使用者中,可以访问React上下文数据,如下所示:

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

但是getInitialProps是为顶级页面运行的,不能访问这些属性。

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