如何在 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

这样代码就更加简单、性能更高并且更容易理解。另外，它执行了您所要求的操作。

这是示例工作代码的链接：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

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/>};

Answer 3

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

{isVisible && <MyComponent/>}

这将仅显示 isVisible = true