Question

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

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

正在使用useCallback设置

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

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

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

将状态传递给父项并在打开新项之前将其全部关闭是不可能的。

有什么想法吗？

Answer 1

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

父母应该通过道具将每个孩子的开放状态以及对changeStateHandler（boolean）的引用传递给孩子，孩子可以调用该方法来通知父母他们已被切换。

因此在父母中，您将：

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

使用react钩子切换两个组件

1 个答案: