reactjs - 如何访问从 _app.tsx 页面导出的变量？

假设这是我的 pages/visitor.tsx

const PageQuery = 'my query';

const Visitor = () => {
  return <div>Hello, World!</div>;
};

export default Visitor;

我如何在 _app.tsx 中访问 PageQuery？

看起来，一种方法是将 PageQuery 作为属性附加到组件函数上，例如，

const PageQuery = 'my query';

const Visitor = () => {
  return <div>Hello, World!</div>;
};

Visitor.PageQuery = PageQuery;

export default Visitor;

现在在 _app.tsx 内，我可以这样访问它：

const App = ({ Component, pageProps }: AppProps) => {
  Component.PageQuery;
}

然而，我在想是否我只是忽略了一种获取每个页面在加载时导出内容的规范方法。

答案＃1

函数在 JavaScript 中是第一类对象。任何 React 函数组件只是另一个函数，并且它可以有自定义属性。

const Visitor = () => {
  return <div>Hello, World!</div>;
};
Visitor.PageQuery = 'my query';

export default Visitor;

现在你可以在 _app.tsx 中使用这个

const App = ({ Component, pageProps }: AppProps) => {
 const query = Component.PageQuery ?? '';
...

}
 

注意：你可能会遇到 TypeScript 的问题。TS 并不知道你刚刚添加的属性。

所以你可能需要使用 & 来扩展默认类型：

type NextPageWithQuery<P = {}, IP = P> = NextPage<P, IP> & {
  PageQuery?: string;
};

type AppPropsWithPageQuery = AppProps & {
  Component: NextPageWithLayout;
};

因此，这将会改变：

const App = ({ Component, pageProps }: AppPropsWithPageQuery) => {
 const query = Component.PageQuery ?? '';
...

}