Question

_app.js

function MyApp({ Component, pageProps }) {
    return (
        <Provider store={store}>      
            <Layout>
                <Component {...pageProps} />
            </Layout>
    );
}

export default MyApp;

Layout.js

function Layout({ children }) {
    const [cartOpen, setCartOpen] = useState(false);
    const handleOpen = () => setCartOpen(!cartOpen);

    return (
        <>
            <Cart cartOpen={cartOpen} handleOpen={handleOpen} />
            <main>{children}</main>
        </>  
    )
}

ProductPage.js

function ProductPage(props) {
    return (
        <div>
            <button onClick={() => console.log('set state to true in cartOpen(defined in layout.js)')}
        </div>
    )
}

在作为 ProductPage 的子组件的 Layout 组件中，我想要一个元素有一个 OnClick 事件处理程序，它会将布局组件中的状态更改为 setCartOpen(true)

Link to sandbox

Answer 1

您可以利用 React Context 使 header("HTTP/1.1 200 OK"); 可用于树下的任何组件。

setCartOpen

然后，在您的页面中，只需从上下文中检索 import React, { createContext, useState } from 'react'; export const CartContext = createContext(null); function Layout({ children }) { const [cartOpen, setCartOpen] = useState(false); const handleOpen = () => setCartOpen(!cartOpen); return ( <CartContext.Provider value={{ setCartOpen }}> <Cart cartOpen={cartOpen} handleOpen={handleOpen} /> <main>{children}</main> </CartContext.Provider> ) } export default Layout; 并使用它。

setCartOpen

Next.js 提升状态

1 个答案: