将 props 传递给 nextjs 中的页面组件

Answer 1

创建一个包装组件的 React Context 提供程序可能是您使用的解决方案，如果您不想使用任何其他包或不想使用 redux 等更强大的工具，则可以使用。

但是在这里使用有点尴尬，具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。

---

示例上下文和用法

import React from 'react';

export const InteractionContext = React.createContext({
  isInteractionsLoading: false,
  isInteractionsError: null,
});

// parent component or _app if necessary

const ProviderComponent = () => {
  return (
    <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}>
      <Interactions />
    </InteractionContext.Provider>
  );
};

const Layout = ({ children }) => {
  const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext);

  // Now you can use isInteractionsLoading and isInteractionsError here
  // ...

  return <div>{children}</div>;
};