反应切换功能

Question

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 是如何在幕后工作的。我非常感谢您能给我的任何帮助或建议，让我走上正确的道路。

非常感谢！

Answer 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]);
  };

反应切换功能

React Toggle Functionality

components

state

toggle

reactjs

react-props

问题

解决方案