gpt4 book ai didi

reactjs - 访问组件外部的 React 上下文

转载 作者:行者123 更新时间:2023-12-03 13:31:21 28 4
gpt4 key购买 nike

我正在使用 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。这可能吗?

最佳答案

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

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

但是 getInitialProps 是针对顶级页面运行的,并且无权访问 props。

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

关于reactjs - 访问组件外部的 React 上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54181314/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com