在单页 React 组件 useState 中切换（显示/隐藏）组件 onClick答案

【问题标题】：Toggle(show/hide) components onClick in single page React component useState在单页 React 组件 useState 中切换（显示/隐藏）组件 onClick
【发布时间】：2020-04-26 16:48:18
【问题描述】：

在下面的单页案例中，如何在组件之间切换？理想情况下，当您单击menu-item 时，相关组件将显示而其他组件将隐藏。

反应

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;

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

一个简单的方法是根据当前状态渲染一个组件，然后改变状态来渲染另一个组件：

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;

你可能想让它更干净一点，但你有这个想法。

【讨论】：

{page === "about" && } 这个东西不是好代码。如果我们有 50-100 个组件怎么办？对于每个新组件，我们都必须编写这种条件，这非常糟糕！
那么你应该使用路由器或者创建你自己的路由器。或者根据您的应用程序状态创建一个单独的组件来处理这些类型的条件。这只是一个示例，说明如何根据您的状态调整渲染，而不是说明您应该如何编写代码和构建项目的示例。 @HardikChaudhary
这对我来说效果很好，找不到更好的例子。谢谢。

【解决方案2】：

您可以管理菜单项的数组，并且选定的组件将呈现！这是codepen 演示！

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"));

【讨论】：