React Toggle Functionality

Question

当前项目图像

我有一个呈现2个Panel组件的Content组件。Content组件将其状态传递给面板1，并将其状态传递给面板2。(面板1最初可见，面板2不可见)

所需功能:

• 当用户点击"隐藏"时组件，它将其设置为可见，并隐藏可见的。
• 如果用户点击现在可见的组件，什么都不会发生，但是如果现在隐藏的组件被点击，它应该变成可见的，可见的又变成隐藏的。

Content.jsx

import React, { useState } from "react";
import Panel from "../panel/Panel";
import "./content.styles.css";
const Content = ({ selected, panelA, panelB }) => {
const [active, setActive] = useState(true);
return (
<div className={`content-wrapper ${selected ? "visible" : "hidden"}`}>
<Panel active={active} panelText={panelA} setActive={setActive} />
<Panel active={!active} panelText={panelB} setActive={setActive} />
</div>
);
};
export default Content;

Panel.jsx

import React from "react";
import "./panel.styles.css";
const Panel = ({ panelText, active, setActive }) => {
const handleClick = () => {
if(!active){
setActive(false);
}
};

return (
<div
onClick={handleClick}
className={`panel-wrapper ${
active ? "active-component" : "hidden-component"
}`}
>
{panelText}
</div>
);
};
export default Panel;

我真的希望我只是错过了一些东西，或者我不理解React是如何工作的。我真的很感激你能给我的任何帮助或建议，让我走上正确的道路。

非常感谢!

Answer 1

如果我正确理解了你的问题，我创建的这个代码盒应该会有所帮助。

问题你就快成功了，但是你还有几个问题:

1. 两个子组件只使用一个状态变量

由于您将active设置为true和false，并将相同的状态变量传递给两个面板，因此面板将相互影响。

2. 如果面板未激活则将active设置为false

const handleClick = () => {
if(!active){
setActive(false); // If the panel is not active, no reason to setActive(false)
}
};

解决方案

1. 你需要有单独的面板标识符，这就是为什么我使用一个数组来跟踪活动面板(如果你只有两个字符串也会很好)

const [activePanels, setActivePanels] = useState([/* initial active panels */])

2. 你可以根据面板的情况添加和删除这个数组:

const handleClick = () => {
if (!active) setActivePanels([panelText]);
};