reactjs - 如何使用钩子(Hook)显示和隐藏 react 组件

Question

喂!如果另一个组件可见，我如何显示一个组件，例如

如果组件 1:显示组件 2:隐藏组件 3:隐藏

如果组件 2:显示组件 3:隐藏组件 1:隐藏

(我有 10 个组件)

我正在使用 React Hooks，谢谢

Answer 1

您需要使用useEffect 钩子(Hook)来跟踪要与另一个组件同步的组件的打开状态。

下一段代码将在 Comp1 打开时触发 Comp2 组件的打开

function Comp1({open, showAnotherChild}) {
  useEffect(() => {
    if (open) {
      showAnotherChild()
    }
  }, [open])
  if (!open) {
    return null
  }

  return // markup
}

function function Comp2({open}) {
  if (!open) {
    return null
  }

  return // markup
}

function Parent() {
  const [comp1Open, setComp1Open] = useState(false)
  const [comp2Open, setComp2Open] = useState(false)
  
 return (
  <>
    <Comp1 open={comp1Open} showAnotherChild={setComp2Open} />
    <Comp2 open={comp2Open} />
    <button onClick={() => setComp1Open(true)}>Open Comp1</button>
  </>
 )
}