javascript - 将组件状态传递给 next.js 中应用程序的所有组件的 Props 替代方法

Question

我想将setState组件（SnackBar）的方法传递给_app.js. 如果我将 SnackBar 的 setState 方法传递给 _app.js 的所有子组件，那么这将是一项非常繁琐的任务。因为，从 _app.js 到单个组件节点大约有 4 个层次结构。这包括，

_app.js -> pages -> layouts -> sections -> components

_app.js 的片段在这里。

function MyApp({ Component, pageProps }) {

    const [ toastOpen, setToastOpen ] = React.useState({
        msg: '',
        open: false
    });

    React.useEffect(() => {
        pageProps = { ...pageProps, setToastOpen };
    }, []);

    return (
        <React.Fragment>
            <ToastMessage
                message={ toastOpen.msg }
                setOpenState={ setToastOpen }
                openState={ toastOpen.open }
            />
            <Component {...pageProps} />
        </React.Fragment>
    )
}

有什么方法可以直接导入setToastOpen子组件中的方法并在需要时使用它？

标签： javascriptreactjsnext.jsreact-props

Answer 1

React 有一个称为 Context Api 的特殊功能，使用它您可以跳过传递给组件的 props 链。

我建议您查看以下资源以了解上下文 Api -

• https://reactjs.org/docs/context.html
• https://www.freecodecamp.org/news/react-context-in-5-minutes

---

ContextAPI 示例

为 Context 创建一个单独的文件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 组件包装你的组件

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 Hook 导入上下文。你不需要<ToastContextProvider>在每个组件中包装。只需使用 useContext 钩子，然后您就可以看到状态并调用函数方法来更改状态。

还要确保参考上述链接以了解有关 Context Api 的更多信息。谢谢你