盖茨比Js项目中如何管理状态

Question

我已经在Gatsby js中设置了我的项目。在头文件中，我创建了一个状态切换按钮点击按钮的地方在header.js文件。我需要那个按钮状态在我的页面，所以我怎么能得到从标题状态到在我的页面(像在关于我们的页面)。

Answer 1

您有多种方法可以做到这一点，从使用上下文(useContext钩子)到最直接的方法(提升状态的值)。

如果没有任何其他实现细节，我会选择第二个。

const Header = ({ sendStateToParent: {} }) => {
const [isOpen, setIsOpen] = useState(false);
const handleOnClick=()=>{
setIsOpen(!isOpen);
sendStateToParent(isOpen);
}
return <section>
Some Header stuff
<div onClick={handleOnClick}>I'm a hamburger menu</div>
</section
}

注意:我正在解构props，但如果需要，您可以使用props.sendStateToParent。

基本上，你正在发送，通过props，一个函数(sendStateToParent，设置为一个空对象，以避免代码破坏，如果它没有从所有的页面收到Header使用，但你可以设置为一个空函数太)。onClick函数处理内部状态(isOpen)，切换其值，并通过sendStateToParent(从props)提升当前值。

所以，你的父组件(about.js)应该看起来像:

const About=()=>{
const sendStateToParent = (isOpen) =>{
console.log("The menu is:", isOpen)
}
return <Layout>
<Header sendStateToParent={sendStateToParent} />
<h2>Some other content </h2>
<Layout>
}

在父组件(About)中，你必须定义发送给子组件(Header)的函数，sendStateToParent接收一个值(isOpen)，因为handleOnClick在子组件中。

所以在你的sendStateToParent中，你有isOpen的当前状态，在那里你可以随心所欲地玩它(在useEffect钩子中使用它，等等)。