javascript - 从父组件 react hooks 更改子组件的 useState

Question

我有一个名为 Window 的子组件，我在 Window 组件中有这个 useState:

Window Component:
      const [showWindow, setShowWindow] = useState(false);

假设这是父组件

Parent component :
/////
////
////
<Window/>
<Button/ onClick={()=>{
setShowWindow(true)
}}>
/////
/////

可以看出我这里有一个 Button 组件，我想通过它设置 showWindow 为“true”。

如何像这个例子那样从父组件中更改子组件中的 useState？我怎样才能访问它？

Answer 1

如果我对问题的理解正确，您希望父级能够更改子级中定义的状态。

我不认为完全按照描述是可能的。更好的解决方案可能是在父级内部定义状态，然后将状态传递给子级。

Parent component :
 const [showWindow, setShowWindow] = useState(false);

<Window showWindow = {showWindow} setShowWindow = {setShowWindow}/>
<Button/ onClick={()=>{
setShowWindow(true)
}}>

这应该会产生我认为您想要的功能。此外，如果您需要更改窗口组件内的窗口，您也可以传递 setter (如果这是一个弹出式组件，您可能会这样做)

正如另一个答案所建议的，进一步的解决方案是使用全局状态/上下文。这将允许您避免传递状态，但有更多的开销