Как реализовать условный рендеринг в функциональном компоненте React?

Question

[konstant1n13]

Хочу реализовать условный рендеринг в функциональном 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;

Answer 1

[Владимир Проскурин]

Вы можете каждый компонент закинуть в словарь вида

const COMPONENTS = {
    enterProfile: EnterProfile,
    personalArea: PersonalArea,
    // ...
}

и выводить в нужном месте

return COMPONENTS[activeItem];

еще вашу задачу решает библиотека react-router, если делаете сложное приложение, есть смысл взглянуть.

Comments

[0xD34F]

const Component = COMPONENTS[activeItem];

return Component && <Component />;

Answer 2

[WbICHA]

switch(activeItem) {
  case 'qwerty':
    return <>...</>;
  ...

  default:
    return <></>;
}