javascript - 如何更改呈现的组件？

Question

我是 React.js 的新手。我正在使用 React.js 制作可更改的布局。所以我尝试使用 useState 来渲染我应该点击的特定布局。所以我尝试添加 setState 以在函数中更改 false 并在同一函数中创建另一个 setState 。但是出现了太多重新渲染错误。那么我可以用什么来制作多变的布局？？
这是我的代码

import React, { useState } from "react";
import Panel from "./Panel";
import PanelTwo from "./PanelTwo";
import styled from "styled-components";
export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);
  const handleOnClick = () => setShowPanel(true);
  const handleOnClick1 = () => setShowPanel1(true);

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick1}>
          <h1>Panel (2+2) </h1>
        </div>

        <div>
          <h1>Panel (2+3)</h1>
        </div>

        <div>
          <h1>Panel (2+4)</h1>
        </div>

        <div>
          <h1>Panel (3+1)</h1>
        </div>

        <div>
          <h1>Panel (3+2)</h1>
        </div>
      </Main>
      {showPanel ? <Panel /> : null}
      {showPanel1 ? <PanelTwo /> : null}
    </div>
  );
}

如果我这样做，当我单击两个按钮时看起来像这样
enter image description here
所以我试过了。

 const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);
  const handleOnClick = () => setShowPanel(true);
  const handleOnClick1 = () => setShowPanel(false);
  setShowPanel1(true);

我得到了太多的重新渲染错误。
这就是我想要做的

enter image description here
当我单击每个按钮时，只会显示一个布局。
但问题是当我点击两个按钮时它重叠了
像这样
enter image description here
如果我的解释不好，我很抱歉。

Answer 1

看起来您真的只想在两种布局之间切换。您可以使用单个状态值、回调和通过三元的条件渲染来完成此操作。

export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);

  const handleOnClick = () => setShowPanel(show => !show);

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick}>
          <h1>Panel (2+2) </h1>
        </div>

        ...
      </Main>
      {showPanel ? <Panel /> : <PanelTwo />}
    </div>
  );
}

OFC，这假设您希望始终显示 至少一个 的布局。如果您想从最初隐藏(即 false )开始，那么您可以在处理程序中切换另一个面板状态 false 来做到这一点。

export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);

  const handleOnClick = () => {
    setShowPanel(true);
    setShowPanel1(false);
  };

  const handleOnClick1 = () => {
    setShowPanel(false);
    setShowPanel1(true);
  };

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick1}>
          <h1>Panel (2+2) </h1>
        </div>

        ...
      </Main>
      {showPanel && <Panel />}
      {showPanel1 && <PanelTwo />}
    </div>
  );
}