Question

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

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

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

（我有10个组成部分）

我正在使用react挂钩，谢谢

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>
  </>
 )
}

Answer 2

您需要在父组件中处理此问题，即您的10个孩子的父组件。该父组件应实现驱动所有子组件的隐藏/显示状态的逻辑。

换句话说，您需要lift state up。

Answer 3

您可以在useState中保留一个字符串值，该字符串值将是该组件的ID，在这种情况下，它将只是一个状态值，我们将通过该状态值来切换显示。您可以在下面看到它

function Parent() {
  const [childToDisplay, setChildToDisplay] = useState(null)
  
 return (
  <>
    <Comp1 id='comp-1' display={childToDisplay === 'comp-1'} />
    <Comp2 id='comp-2' display={childToDisplay === 'comp-2'} />
  </>
 )
}

要切换显示，可以将按钮保留在父组件中。每当需要显示任何组件时，都可以设置正确的id来表示为字符串，然后它将相应地显示子组件。

这样，您不必为多个子组件设置多个布尔状态值。

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

3 个答案: