如何更改渲染的组件？答案

【问题标题】：How to change component that is rendered?如何更改渲染的组件？
【发布时间】：2021-05-24 16:31:49
【问题描述】：

我是 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 如果我的解释不好，我很抱歉。

【问题讨论】：

好吧，函数体中的setShowPanel1(true); 是触发渲染循环的原因，除此之外，不清楚您希望 UI 做什么。您能否更新您的问题以包含 Minimal, Complete, and Reproducible Code Example 并提供有关预期行为与实际行为的更多详细信息？
先生，我编辑了它。

标签： javascript reactjs react-hooks

【解决方案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>
  );
}

【讨论】：