我最初的目标要解决：我有 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。现在，当我单击其中一个组件时，它们都会消失。我只是不确定使用零是否适合用来比较每个对象或我需要使用什么。
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
如果我是你，我会简化事情。首先，我将从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;
慕少森
TA贡献2019条经验 获得超9个赞
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/>};
月关宝盒
TA贡献1772条经验 获得超5个赞
一种简单的方法是在 useState 或 mobx 等状态中保存一个布尔值（例如 isVisible = true ）。然后在 React 组件中，您可以使用双 & 符号，如下所示：
{isVisible && <MyComponent/>}这将仅显示 isVisible = true
添加回答
举报
0/150
提交
取消