react有一个名为context api的特殊功能，使用该功能，您可以跳过传递到组件中的道具链。。
我建议您查看下面的参考资料，以了解上下文api-
https://reactjs.org/docs/context.html
https://www.freecodecamp.org/news/react-context-in-5-minutes

contextapi示例

为上下文创建一个单独的文件 Toast-context.js ，您可以使用任何您想要的名称。

import React, { useState } from "react"
    const ToastContext = React.createContext({
    message: "",
    toastOpen: false,
    toggleToast: () => { },
    changeMessage: () => { }
})

export const ToastContextProvider = ({children}) => { 
/*you need to use 
this component to wrap App.js so that the App.js and all of its children 
and their children components and so on will get the access to the 
context*/

    const [toastOpen, setToastOpen] = useState(false);
    const [message, setMessage] = useState("");

    const toggleToast = () => {
    setToastOpen(true)
    }

    const changeMessage = (message) => {
    setMessage(message);
    }

    return (
        <ToastContext.Provider value={
            toastOpen,
            message,
            toggleToast,
            changeMessage
        }>
            {children}
        </ToastContext.Provider>
    )
}

现在在 App.js 使用toastcontextprovider组件 Package 组件所需的文件

import React, { useContext } from "react";
import { ToastContextProvider } from "./Toast-context";
import { ToastContext } from "./Toast-context";

function MyApp({ Component, pageProps }) {
    const { message, toastOpen, toggleToast, changeMessage } =
        useContext(ToastContext);

    return (
        <ToastContextProvider>
            {toastOpen && <div className="toast">{message}</div>}
        </ToastContextProvider>
    );
}

只需在所需的任何组件中使用usecontext钩子导入上下文。你不需要用你的衣服包起来 <ToastContextProvider> 在每个组件中。只需使用usecontext钩子，就可以看到状态和调用函数方法来更改状态。
另外，请务必参考上述链接以了解有关上下文api的更多信息。非常感谢。