如何在 useStates 之间切换而不是添加新的

Posted 2023-02-23

【中文标题】如何在 useStates 之间切换而不是添加新的

【英文标题】：How to switch between useStates instead of adding new

【发布时间】：2021-08-29 02:40:43

【问题描述】：

我需要在我的 3 个不同组件之间切换：

const [showOne, setShowOne] = useState(false);
const [showTwo, setShowTwo] = useState(false);
const [showThree, setShowThree] = useState(false);

所以当点击 showOne 时，会显示 One 组件，但是当点击 showTwo/showThree 时，会隐藏 showOne，而会显示组件 Two/Three。

目前的解决方案：

<div className="box" onClick=() => setShowOne(!showOne)></div>
<div className="box" onClick=() => setShowTwo(!showTwo)></div>
<div className="box" onClick=() => setShowThree(!showThree)></div>

showOne && (
             <One />
            )
showTwo && (
             <Two />
            )
showThree && (
             <Three />
            )

当前行为：

点击showOne时->组件一出现，点击showTwo后，组件二会添加到组件一下强>。 （showThree - Three 也一样）

预期行为：

点击showOne - 显示One，点击showTwo - One 消失，Two 会出现（同样显示Three - Three )

【参考方案1】：

创建一个显示状态。

const [toShow, setToShow] = useState(0);

您可以根据需要将初始状态设置为 1 ,2 或 3。

并按如下方式渲染框

toShow ===1 && <One />
toShow ===2&& <Two />
toShow ===3&& <Three />

【讨论】：

我关注了你的帖子，但我会在哪里 setToShow ？它在我的 onClick 功能中吗？