在 Gatsby 中将位置和 pageContext 从页面传递到子组件

Question

我的盖茨比网站的页面布局如下所示。

const Container = ({location, children, pageContext}) => {
  return (
    <>
      <Header location={location} />
      <Breadcrumbs pageContext={pageContext} />
      {children}
      <Footer />
    </>
  )
}

我需要将location和pageContext从页面传递到子组件。我尝试添加location和pageContext到DataProvider这样的：

export const DataContext = React.createContext();

const DataProvider = ({ children, location, pageContext }) => {
  return (
    <DataContext.Provider value={{
      location,
      pageContext
    }}>
      {children}
    </DataContext.Provider>
  )
};

export default DataContext
export { DataProvider }

然后我使用DataProvideringatsby-ssr.js和gatsby-browser.js这样的：

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <DataProvider>
      {element}
    </DataProvider>
  </ThemeProvider>
);

在子组件中：

const HeaderLinks = () => {
  return (
    <DataContext.Consumer>
      {
        context => (
          <Menu
            theme="light"
            mode="horizontal"
            selectedKeys={[context.location.pathname]}
          >
            <Menu.Item key={key}>
              <Link to={url}>{name}</Link>
            </Menu.Item>
          </Menu>
        )
      }
    </DataContext.Consumer>
  )
}

但它似乎不起作用，因为当我移动到另一个页面时它没有得到更新。（我也有wrapPageElement，Container可能就是这个原因。）

如何将location和传递pageContext给子组件？使用 React Context 还是简单地将它们作为 props 传递更好？如果我应该使用 React Context，我该如何纠正我的代码以使其正常工作？

Answer 1

您可以使用获取页面道具并将其传递给 DataProvider 的位置，而不是使用wrapRootElementto use 。这将确保每个页面上的 pageContext 和位置发生变化ContexProviderwrapPageElement

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
      {element}
  </ThemeProvider>
);

export const wrapPageElement = ({ element, props }) => (
  <DataProvider value={props}>
      {element}
  </DataProvider>
);

export const DataContext = React.createContext();

const DataProvider = ({ children, value }) => {
  const {location, pageContext} = value;
  return (
    <DataContext.Provider value={{
      location,
      pageContext
    }}>
      {children}
    </DataContext.Provider>
  )
};

export default DataContext
export { DataProvider }