如何在 React 中使用 useState 或条件渲染隐藏和显示组件？

Question

我最初的目标要解决：

• 我有 4 个组件并排排列。我希望能够切换/单击其中一个组件并使其他 3 个组件消失。然后重新切换同一组件以使其他组件重新出现。但也能够通过切换任何其他组件来完成相同的任务。

• 简单来说，每个组件都是一个 div 标签，其中包含一个图像标签。

我对这个问题的初步看法：

export const Test = () => {

    const intialValue = [{id: 0, component: null}]

    const array = [

                    {id: 1, component: <CompOne/>}, 

                    {id: 2, component: <CompTwo/>}, 

                    {id: 3, component: <CompThree/>}, 

                    {id: 4, component: <CompFour/>}

                  ]

    

    const [chosenNumber, setChosen] = useState(0)

    const [statearray, setArray] = useState(array)

    useEffect(() => {

        console.log(chosenNumber)

        const arr = array

        if(chosenNumber === 0 ) setArray(array)

        else setArray(arr.filter( num => num === chosenNumber))

    }, [chosenNumber])

    const handleClick = (number) => {

        if(number === chosenNumber) setChosen(0)

        else setChosen(number)

    }

        return (

            <div className="flex" >

                {statearray.map((comp, number) => <div key={number} className="h-12 w-12 bg-gray-400 m-1 flex items-center justify-center" onClick={() => handleClick(comp.id)}>{comp.id}</div>)}

            </div>

        );

}

我的思考过程是，当我单击组件（div）时，我将设置选择的编号，如果我单击的div与选择的相同，则将选择重置为零。

每次 selectedNumber 发生变化时，useEffect 都应该检测到它并用 selectedNumber 过滤数组，如果 Choose 为零，则重置 stateArray。

现在，当我单击其中一个组件时，它们都会消失。我只是不确定使用零是否适合用来比较每个对象或我需要使用什么。

Answer 1

如果我是你，我会简化事情。首先，我将从array组件中提取内容，因为您不希望每次重新渲染组件时都重新渲染该组件。然后，我会更改您的状态并仅保留items将包含array项目的状态。我还会array通过提供一个 flag 来扩展这些项目isVisible。然后，我将删除您的useEffect并改进您的handleClick，因为您只想在单击按钮时触发此操作。在该函数中，我将通过映射您的项目并将“未单击”项目更改为 false 来handleClick创建一组新项目。这样，您就知道要隐藏哪些项目。最后，我将根据属性渲染组件。因此，如果为 true，则该项目将被设置为渲染，反之亦然。itemsisVisibleisVisibleisVisiblehiddenfalse这样代码就更加简单、性能更高并且更容易理解。另外，它执行了您所要求的操作。这是示例工作代码的链接：codesandboximport React, { useState } from "react";const Comp1 = () => <div>hi</div>;const Comp2 = () => <div>hi2</div>;const Comp3 = () => <div>hi3</div>;const array = [&nbsp; { id: 1, component: <Comp1 />, isVisible: true },&nbsp; { id: 2, component: <Comp2 />, isVisible: true },&nbsp; { id: 3, component: <Comp3 />, isVisible: true }];export const Test = () => {&nbsp; const [items, setItems] = useState(array);&nbsp; const handleClick = (number) => {&nbsp; &nbsp; const triggeredItems = items.map((item) => {&nbsp; &nbsp; &nbsp; if (item.id !== number) {&nbsp; &nbsp; &nbsp; &nbsp; item.isVisible = !item.isVisible;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; });&nbsp; &nbsp; setItems(triggeredItems);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="flex">&nbsp; &nbsp; &nbsp; {items.map(({ id, component, isVisible }) => (&nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="h-12 w-12 bg-gray-400 m-1 flex items-center justify-center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleClick(id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hidden={!isVisible}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {component}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );};export default Test;

Answer 2

const [currentComponent, setCurrentComponent] = useState(1);const handleClick = () =>{&nbsp; &nbsp; switch(currentComponent){&nbsp; &nbsp; &nbsp; &nbsp; case 1:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCurrentComponent(2)&nbsp; &nbsp; &nbsp; &nbsp; case 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCurrentComponent(3)&nbsp; &nbsp; &nbsp; &nbsp; case 3:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCurrentComponent(4)&nbsp; &nbsp; &nbsp; &nbsp; case 4:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCurrentComponent(1)&nbsp; &nbsp; }}<button onClick={()=> handleClick()}>Click me!</button>{currentComponent == 1 && <Comp1/>};{currentComponent == 2 && <Comp2/>};{currentComponent == 3 && <Comp3/>};{currentComponent == 4 && <Comp4/>};

Answer 3

一种简单的方法是在 useState 或 mobx 等状态中保存一个布尔值（例如 isVisible = true ）。然后在 React 组件中，您可以使用双 & 符号，如下所示：{isVisible&nbsp;&&&nbsp;<MyComponent/>}这将仅显示 isVisible = true