如何更新Gatsby中整个组件的本地状态?

Question

我想在静态React站点中创建一个带有解散按钮的简单通知。假设我的组件设置如下:

// layout.js
import * as React from 'react'
const Layout = ({showNotification = true}) => 
<div>
<header>HEADER</header>
{showNotification ? 
<div style={{display: showNotification ? "flex" : "none"}}>
NOTIFICATION 
<span onClick={() => {showNotification = false}}>
DISMISS
</span>
</div> 
: null}
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</div>
export default Layout

我期望由于display属性是基于showNotification的值设置的，并且由于onClick更新了showNotification的值，因此单击"解散"Span将隐藏整个通知。

然而，据我所知onClick处理程序被调用，它确实更新了showNotifications的值，但这并没有在渲染中得到反映。

我如何设置这个，以便我可以得到onClick更新状态的方式，将反映在组件的其余部分的组件?

Answer 1

showNotification是一个道具。你不能直接改变它。除了showNotification之外，你还必须传递一个函数来改变被设置状态的组件的状态。下面是一个例子:

import React, {useState} from 'react'
const App = () => {
const [showNotification, setShowNotification] = useState(true)
const toggleShow = () => setShowNotification(!showNotification)
return (
<div> 
Some content
<Layout 
showNotification={showNotification}
toggleShow={toggleShow} 
/>
</div>
)
}
export const Layout = ({showNotification, toggleShow}) => 
<div>
<header>HEADER</header>
{showNotification ? 
<div style={{display: showNotification ? "flex" : "none"}}>
NOTIFICATION 
<span onClick={toggleShow}>
DISMISS
</span>
</div> 
: null}
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</div>
export default App