使用反应钩子切换两个组件

Question

我有两个相同组件的实例。组件可以打开或关闭。

组件具有const [isOpen, setIsOpen] = useState(false)

正在使用useCallback进行设置

const openComponent = useCallback(() => {
setIsOpen(true)
}, [])
const closeComponent = useCallback(() => {
setIsOpen(false)
}, [])

组件位于其自己的上下文中。但是我什至很难想出如何通过父级处理的想法，当一个实例打开时，关闭另一个难题。

将状态传递给父级并在打开新状态之前关闭所有状态不是一种选择。

有什么想法吗？

Answer 1

您应该将这两个组件(打开或错误(的状态提升到父级，以便父级可以具有此逻辑(一次只能打开一个(。

父级应将打开状态传递给每个子项，以及一个对 changeStateHandler(布尔值(的引用，子项可以调用该 changeStateHandler 来通知父级他们已被切换。

所以在父母中，你会有：

const [firstChildState, setFirstChildState] = useState(false);
const [secondChildState, setSecondChildState] = useState(false);
const handlStateChanged = () => {
// toggle both states
}
[...]
<Child isOpen={firstChildState} onStateChange={handlStateChanged} />
<Child isOpen={secondChildState} onStateChange={handlStateChanged} />

在儿童中 ：

// calls props.onStateChange on toggle, use props.isOpen to display proper state