Переключение (показ / скрытие) компонентов onClick на одной странице. Реактивный компонент useState. - PullRequest
Новая
       3

Переключение (показ / скрытие) компонентов onClick на одной странице. Реактивный компонент useState.

0 голосов
/ 09 января 2020

Как вы переключаетесь между компонентами в случае одной страницы ниже? В идеале, когда вы нажимаете 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;

Ответы [ 2 ]

1 голос
/ 09 января 2020

Вы можете управлять массивом для пунктов меню, и выбранный компонент будет отображаться! Вот демоверсия 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"));
0 голосов
/ 09 января 2020

Простой способ - визуализировать компонент на основе текущего состояния и изменить его для отображения другого компонента: 

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;

Возможно, вы хотите сделать его немного чище, но у вас есть идея.

...