Javascript 如何在应用程序中切换组件

我是React的初学者，我想制作一个像Windows tiles这样的带有仪表板的web应用程序。 我很容易生成它们。但当我点击其中一个按钮时，我想隐藏仪表板菜单并显示子应用程序“Prog1”。当然，把它倒过来。当我单击close按钮时，它会关闭子应用程序并返回到Dash菜单（这意味着它会隐藏Prog1以显示Dash）

我可以使用如下功能隐藏仪表板菜单：

fctHide = () => {
    this.setState({ isActive: false });
}

但是，如何显示可能具有类似fctShow的函数的其他子应用程序

我们是被迫将函数放在一个类中还是仅仅做一个普通的显示/隐藏函数？ 是否有一种更简单、更新的方法来实现这一点（例如使用挂钩）

我的应用程序位于Codepen上，如下所示： 我可以按要求带你到这里

我很惊讶地看到很多问题或教程可以显示和隐藏按钮中的元素，但不能在class/HTML/template等之间切换（我猜就像React Native router）

---

谢谢

除非要将旧应用程序转换为React，即不要从头开始编写纯React应用程序，否则不要多次使用ReactDOM.render。当您希望在组件之间共享活动状态时，它应该处于其活动状态

我不确定你的仪表板应该如何工作，但这里有一个例子。在这里，APP是最接近的祖先。如果不使用URL路由或，则不需要react路由器

从“React”导入React；
导入“/styles.css”；
类。组件{
render（）{
const{isActive，fctHide，fctShow}=this.props；
常量元素=[“1”、“2”、“3”、“4”]；
常量项=[]；
for（元素的常量[索引，值].entries（））{
推(
{
fctShow（索引）；
}}
>
{value}
);
}
//如果（isActive）{
返回(
{items}
);
//}其他{
//返回null；
// }
}
}
类Prog1扩展了React.Component{
render（）{
const{isActive，selected，fctHide}=this.props；
如果（isActive）{
返回(
接近
方案1
测试1
测试2
测试3
选定：{选定}

AAAA
BBBBB
CCCCC

);
}否则{
返回null；
}
}
}
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isActive:true，selected:null}；
}
fctShow=选定=>{
this.setState（{isActive:true，selected}）；
};
fctHide=（）=>{
this.setState（{isActive:false}）；
};
render（）{
const{isActive，selected}=this.state；
返回(
);
}
}

好的！我最终使用了建议的react路由器。但是我使用了Hooks版本（带有 方案1 测试1 测试2 测试3

• AAAA
• BBBBB
• CCCCC

); } } 导出默认程序1；

• 路由器页面，用于在应用程序和主仪表板之间切换

从“React”导入React；
从“/Apps/Prog1”导入Prog1；
从“/Apps/Prog2”导入Prog2；
从“/Apps/Prog3”导入Prog3；
从“/Apps/Prog4”导入Prog4；
从“/App”导入破折号；
常数路由={
"/": () => ,
“/Prog1”：（）=>，
“/Prog2”：（）=>，
“/Prog3”：（）=>，
“/Prog4”：（）=>
};
导出默认路径；

• 主页，仪表板（App.js）

从“React”导入React；
从“hookrouter”导入{A}；
常量元素=[“1”、“2”、“3”、“4”]；
函数Dash（）{
常量项=[]；
for（元素的常量[索引，值].entries（））{
推(
);
}
返回(
{items}
);
}
导出默认破折号；

• 要完成此操作，请打开索引页：

从“React”导入React；
从“react dom”导入{render}；
导入“/styles.css”；
从“hookrouter”导入{useRoutes}；
从“/router”导入路由；
从“/Apps/404”导入NoPageFound；
函数App（）{
const routeResult=用户路由（路由）；
返回{routeResult}；
}
render（，document.getElementById（“根”））；

它工作得很好。我只需要添加MemoryRouter之类的东西来隐藏URL并准备移动版本。 当我将这个部分插入Django项目时，我有点害怕。 或者，也许我应该把它分开？（你不必回答，我想我会关上的）

---

谢谢：）

我想你需要反应路线我们不能用香草反应路线？否则，我不明白它的意思^^当然，您可以在一个大组件中有条件地进行渲染（即，您可以在单击按钮时设置状态并相应地进行渲染），但是1。你很快就会迷失在自己的逻辑中，2。你会在一个组件中得到大量的代码（与重构的一般编程实践相反），3。这将违反React最佳实践，4<代码>反应路由器正是删除此类样板文件的工具。在我看来，路由器属于“香草反应”。实际上，它可能是我所需要的。好的一点是，它也适用于react native！：）它将包括在Django项目中。有一个prolbmem吗？我刚刚看到React钩子与React路由器非常相似，如果我想留在“香草分支”，我可能会做得很好：但如果我想将应用程序导出到android，React Native上的钩子是否有效。它的选择很复杂，因为我看到它的路由器可以很好地处理这两种情况。谢谢，谢谢。现在我们可以打开和关闭子应用程序，这很好。但是，最重要的是，当我打开子应用程序时，我隐藏了主1/2/3/4破折号。

import React from "react";
import "./styles.css";

class Dash extends React.Component {
  render() {
    const { isActive, fctHide, fctShow } = this.props;
    const elements = ["1", "2", "3", "4"];

    const items = [];

    for (const [index, value] of elements.entries()) {
      items.push(
        <button
          key={index}
          onClick={() => {
            fctShow(index);
          }}
        >
          {value}
        </button>
      );
    }

    // if (isActive) {
    return (
      <div>
        <table>
          <tbody>
            <tr>
              <td> {items} </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
    // } else {
    //   return null;
    // }
  }
}

class Prog1 extends React.Component {
  render() {
    const { isActive, selected, fctHide } = this.props;

    if (isActive) {
      return (
        <div className="contProg1">
          <button onClick={fctHide}>Close</button>
          <h1>Program 1</h1>
          <h2>Test1</h2>
          <h2>Test2</h2>
          <h2>Test3</h2>
          Selected: {selected}
          <ul>
            <li>AAAAA</li>
            <li>BBBBB</li>
            <li>CCCCC</li>
          </ul>
        </div>
      );
    } else {
      return null;
    }
  }
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true, selected: null };
  }

  fctShow = selected => {
    this.setState({ isActive: true, selected });
  };

  fctHide = () => {
    this.setState({ isActive: false });
  };

  render() {
    const { isActive, selected } = this.state;

    return (
      <>
        <Dash
          isActive={isActive}
          fctHide={this.fctHide}
          fctShow={this.fctShow}
        />
        <Prog1 isActive={isActive} selected={selected} fctHide={this.fctHide} />
      </>
    );
  }
}

import React from "react";
import { A } from "hookrouter";

class Prog1 extends React.Component {
  render() {
    return (
      <div class="contProg1">
        <button class="close">
          {" "}
          <A href="/">Close</A>
        </button>
        <h1>Program 1</h1>
        <h2>Test1</h2>
        <h2>Test2</h2>
        <h2>Test3</h2>
        <ul>
          <li>AAAAA</li>
          <li>BBBBB</li>
          <li>CCCCC</li>
        </ul>
      </div>
    );
  }
}

export default Prog1;

import React from "react";
import Prog1 from "./Apps/Prog1";
import Prog2 from "./Apps/Prog2";
import Prog3 from "./Apps/Prog3";
import Prog4 from "./Apps/Prog4";
import Dash from "./App";

const routes = {
  "/": () => <Dash />,
  "/Prog1": () => <Prog1 />,
  "/Prog2": () => <Prog2 />,
  "/Prog3": () => <Prog3 />,
  "/Prog4": () => <Prog4 />
};

export default routes;

import React from "react";
import { A } from "hookrouter";

const elements = ["1", "2", "3", "4"];

function Dash() {
  const items = [];

  for (const [index, value] of elements.entries()) {
    items.push(
      <A href={"/Prog" + (index + 1)}>
        <button key={index}>{value}</button>
      </A>
    );
  }

  return (
    <div className="Dash">
      <table>
        <tr>
          <td> {items} </td>
        </tr>
      </table>
    </div>
  );
}

export default Dash;

import React from "react";
import { render } from "react-dom";
import "./styles.css";
import { useRoutes } from "hookrouter";
import routes from "./router";
import NoPageFound from "./Apps/404";

function App() {
  const routeResult = useRoutes(routes);
  return <div className="Dash">{routeResult || <NoPageFound />}</div>;
}

render(<App />, document.getElementById("root"));