反应切换功能

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 应该会有所帮助。

问题

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

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

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

1. 如果面板未激活，则将 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 */])

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

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