Javascript 在单页React component useState中单击时切换（显示/隐藏）组件

在下面的单页案例中，如何在组件之间切换？理想情况下，当您单击

菜单项时，相关组件将显示，其他组件将隐藏

反应

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    // Toggle state(s) here?

    // Toggle function(s) here?

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item">About</li>
                <li className="menu-item">Projects</li>
                <li className="menu-item">Contact</li>
            </ul>
        </div>
        <div className="container">
            <About />
            <Projects />
            <Contact />
        </div>
    )
};

export default App;

import React，{useState}来自“React”；
从“/components/About”导入关于；
从“/components/Projects”导入项目；
从“/components/Contact”导入联系人；
常量应用=（）=>{
//是否在此处切换状态？
//是否在此处切换功能？
返回(

关于
项目
联系

)
};
导出默认应用程序；
一种简单的方法是基于当前状态渲染组件，并更改状态以渲染另一个组件：

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    const [page, setPage] = useState("about")

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item" onClick={() => setPage("about")}>About</li>
                <li className="menu-item" onClick={() => setPage("projects")}>Projects</li>
                <li className="menu-item" onClick={() => setPage("contact")}>Contact</li>
            </ul>
        </div>
        <div className="container">
            {page === "about" && <About />}
            {page === "projects" && <Projects />}
            {page === "contact" && <Contact />}
        </div>
    )
};

export default App;

import React，{useState}来自“React”；
从“/components/About”导入关于；
从“/components/Projects”导入项目；
从“/components/Contact”导入联系人；
常量应用=（）=>{
const[page，setPage]=useState（“关于”）
返回(

setPage（“about”）}>about
setPage（“项目”）}>projects
setPage（“联系人”）}>contact

{page==“关于”&&}
{page==“项目”&&}
{page==“联系人”&&}
)
};
导出默认应用程序；

您可能想让它更干净一点，但您有这个想法。
您可以管理菜单项的数组，选定的组件将呈现！
这是演示

const About=（）=>“关于我们的页面”；
const Projects=（）=>“项目页面”；
const Contact=（）=>“联系人页面”；
常量应用=（）=>{
常量菜单项=[
{组件：，标题：“关于”}，
{组成部分：，标题：“项目”}，
{组件：，标题：“联系人”}
];
const[component，setComponent]=React.useState（menuItems[0].component）；
返回(

{
menuItems.map（（项目，i）=>
setComponent（item.component）}className=“menu item”>
{item.title}

)
}

{component}
);
};
render（，document.getElementById（“根”））；
{page==“about”&&&}这不是一个好代码。如果我们有50-100个组件呢？对于每一个新组件，我们都必须编写这种条件，这是非常糟糕的！然后你应该使用路由器或者创建你自己的路由器。或者创建一个单独的组件，根据应用程序状态处理这些类型的条件。这只是一个如何根据状态调整渲染的示例，而不是如何编写代码和构建项目的示例@哈迪克乔杜里
const About=()=>"About us page";
const Projects=()=>"Projects page";
const Contact=()=>"Contact Page";
const App = () => {
   const menuItems =[
    {component:<About />, title:"About"},
    {component:<Projects />, title:"Projects"},
    {component:<Contact />, title:"Contact"}
   ];

   const [component, setComponent] = React.useState(menuItems[0].component);

    return (
      <div>
        <div className="nav">
            <ul className="menu">
                {
                  menuItems.map((item,i)=>
                    <li key={i} onClick={()=>setComponent(item.component)} className="menu-item">
                      {item.title}
                    </li>
                  )
                }
            </ul>
        </div>
        <div className="container">
           {component}
        </div>
       </div>
    );
};

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