reactjs - 如何使用钩子显示和隐藏反应组件

Question

嗨！如果另一个组件可见，我如何显示一个组件，例如

if 组件 1：显示组件 2：隐藏组件 3：隐藏

if 组件 2：显示组件 3：隐藏组件 1：隐藏

（我有 10 个组件）

我正在使用反应钩子，谢谢

标签： reactjscomponentsreact-hooksdisplay

Answer 1

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

接下来的代码将在 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>
  </>
 )
}