如何在 React 中隐藏和显示带有 useState 或条件渲染的组件？

Question

我最初要解决的目标：

• 我有 4 个组件并排排列在一起。我希望能够切换/单击其中一个组件并让其他 3 个组件消失。然后重新切换相同的组件以使其他组件重新出现。但也有能力通过切换任何其他组件来完成相同的任务。
• 每个组件简单来说就是一个div标签，里面有一个image标签。

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

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）时，我会设置choiceNumber，如果我点击的div与选择的div相同，则将选择重置为零。

每次 selectedNumber 发生变化时，useEffect 都会检测到并使用 selectedNumber 过滤数组，如果选择为零，则重置 stateArray。

现在，当我单击其中一个组件时，它们都消失了。我只是不确定使用零是比较每个对象的正确方法还是我需要使用的方法。

感谢您的帮助！

Answer 1

如果我是你，我会简化事情。首先，我会从组件中提取array，因为您不希望每次重新渲染组件时都重新渲染它。然后，我将更改您的状态并仅保留包含 array 项目的 items 状态。我还将通过提供标志isVisible 来扩展array 项目。然后，我会删除您的useEffect 并改进handleClick，因为您只想在单击按钮时触发它。在handleClick 函数中，我将通过映射您的items 并将“未点击”项目isVisible 更改为false 来创建一组新项目。这样，您就知道要隐藏哪些项目。最后，我将根据isVisible 属性呈现组件。因此，如果isVisible 为真，则该项目将在呈现时将hidden 设置为false，反之亦然。

这样代码更简单，性能更高，更容易理解。另外，它可以满足您的要求。

这是示例工作代码的链接：codesandbox

import React, { useState } from "react";

const Comp1 = () => <div>hi</div>;
const Comp2 = () => <div>hi2</div>;
const Comp3 = () => <div>hi3</div>;

const array = [
  { id: 1, component: <Comp1 />, isVisible: true },
  { id: 2, component: <Comp2 />, isVisible: true },
  { id: 3, component: <Comp3 />, isVisible: true }
];

export const Test = () => {
  const [items, setItems] = useState(array);

  const handleClick = (number) => {
    const triggeredItems = items.map((item) => {
      if (item.id !== number) {
        item.isVisible = !item.isVisible;
      }

      return item;
    });

    setItems(triggeredItems);
  };

  return (
    <div className="flex">
      {items.map(({ id, component, isVisible }) => (
        <div
          key={id}
          className="h-12 w-12 bg-gray-400 m-1 flex items-center justify-center"
          onClick={() => handleClick(id)}
          hidden={!isVisible}
        >
          {component}
        </div>
      ))}
    </div>
  );
};

export default Test;

Answer 2

一种简单的方法是在 useState 或 mobx 等中将布尔值保存在 state 中（例如 isVisible = true ）。然后在 react 组件中，您可以使用双 & 符号，如下所示：

{isVisible && <MyComponent/>}

这只会在 isVisible = true 时显示

Answer 3

const [currentComponent, setCurrentComponent] = useState(1);

const handleClick = () =>{
    switch(currentComponent){
        case 1:
            setCurrentComponent(2)
        case 2:
            setCurrentComponent(3)
        case 3:
            setCurrentComponent(4)
        case 4:
            setCurrentComponent(1)

    }
}


<button onClick={()=> handleClick()}>Click me!</button>


{currentComponent == 1 && <Comp1/>};
{currentComponent == 2 && <Comp2/>};
{currentComponent == 3 && <Comp3/>};
{currentComponent == 4 && <Comp4/>};