反应切换功能

Posted 2023-02-23

【中文标题】反应切换功能

【英文标题】：React Toggle Functionality

【发布时间】：2021-11-15 07:50:09

【问题描述】：

Current Project Image

我有一个呈现 2 个面板组件的内容组件。 Content 组件将其状态传递给面板 1，并将 !state 传递给面板 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 是如何在幕后工作的。我非常感谢您能给我的任何帮助或建议，让我走上正确的道路。

非常感谢！

【参考方案1】：

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

问题

你快到了，但这里有几个问题：

两个子组件仅使用一个状态变量。

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

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

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

解决方案

您需要有单独的面板标识符，这就是我使用数组来跟踪活动面板的原因（如果您只有两个字符串也可以）

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

您可以根据面板的情况添加和删除此数组：

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

【讨论】：

你太棒了。非常感谢您对思南的帮助！这正是我想做的。谢谢你，我现在明白了。