主页 / 问题 / 1355051
Accepted
Alexei
Asked:2022-04-29 03:16:50 +0000 UTC2022-04-29 03:16:50 +0000 UTC

如何在功能性 React 组件中实现条件渲染？

  • 772

再会！

我想在功能性 React 组件中实现条件渲染。我不知道如何在函数中做到这一点。

我需要根据状态渲染相应的导入组件。

我使用三元运算符编写了这个逻辑，一切正常，但是这段代码很糟糕而且不可读。

我绝对需要在功能组件中实现它，因为 我用钩子。

import React, {useState, useEffect} from 'react';

import Header from './header/header';
import Footer from './footer/footer';

//Один из этих компонентов будет рендерится между Хэдером и Футером  ↓
//Название компонента в состоянии (activeItem)

import Landing from './landing/landing';
import BookingManagement from './bookingManagement/BookingManagement';
import BookingTickets from './bookingTickets/bookingTickets';
import EnterProfile from './enterProfile/enterProfile';
import PersonalArea from './personalArea/personalArea';
import Register from './register/register';
import SearchResults from './searchResults/searchResults';
import ChoosePlace from './choosePlace/choosePlace';


function App() {
    
    const [activeItem, setActiveItem] = useState('landing');
    
    
     useEffect(() => {
        console.log(activeItem)
      });

  return (
       <>
      
      
          <Header changeMain={setActiveItem}/>
            
      
    
       {(activeItem=='landing' ? (
        <Landing changeMain={setActiveItem}/>
      ) : (
        <></>
      ))}
        {(activeItem=='bookingManagement' ? (
        <BookingManagement />
      ) : (
        <></>
      ))}
          {(activeItem=='bookingTickets' ? (
        <BookingTickets />
      ) : (
        <></>
      ))}
        {(activeItem=='enterProfile' ? (
                <EnterProfile />
              ) : (
                <></>
         ))}
          {(activeItem=='personalArea' ? (
                <PersonalArea />
              ) : (
                <></>
         ))}
           {(activeItem=='register' ? (
                <Register/>
              ) : (
                <></>
         ))}
             {(activeItem=='searchResults' ? (
                <SearchResults/>
              ) : (
                <></>
         ))}

           {(activeItem=='choosePlace' ? (
                <ChoosePlace />
              ) : (
                <></>
         ))}
          
          
          
          
          
          
      
          <Footer changeMain={setActiveItem}/>
       </>
  );
}

export default App;

javascript

1 个回答

  1. Best Answer

    上帝..你为什么这么恨人？=(

    1. 效果不能不分组。
    useEffect(() => {
        console.log(activeItem)
      }, [activeItem]);
    1. 你的问题的答案。函数式编程的甜头是什么，函数可以在函数中，这并不妨碍它们一起生活。最主要的是不要滥用它。
    function getItem() {
  switch (activeItem) {
    case 'landing': return <Landing changeMain={setActiveItem}/>;
    case 'bookingManagement': return <BookingManagement />;
    ...
    default: return null;
  }
}


  return (<>
      <Header changeMain={setActiveItem}/>
      { getItem() }
      <Footer />
     </>)
    • 1

相关问题