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

Question

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

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

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

(我有10个组件(

我使用反应钩子，谢谢

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 个子组件的父组件(中处理此问题。此父组件应实现驱动所有子组件的隐藏/显示状态的逻辑。

换句话说，你需要提升状态。

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

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