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

【问题标题】：How can show and hide react components using hooks如何使用钩子显示和隐藏反应组件
【发布时间】：2020-10-19 02:39:24
【问题描述】：

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

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

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

（我有 10 个组件）

我正在使用 react hooks，谢谢

【问题讨论】：

标签： reactjs components react-hooks display

【解决方案1】：

您可以在 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 设置为字符串状态，然后它将相应地显示子组件。

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

【讨论】：

【解决方案2】：

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

也就是说你需要lift state up。

【讨论】：

【解决方案3】：

您需要使用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>
  </>
 )
}

【讨论】：