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

Question

我想在功能性 React 组件中实现条件渲染。我不知道如何在函数中执行此操作。

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

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

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

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

// One of these components will be rendered between Header and Footer ↓
// Name of the component in the state (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

function App() {
    
    const [activeItem, setActiveItem] = useState('landing');
    
    const itemToComponent = [
      landing: {component: Landing},
      bookingManagement: {component: BookingManagement},
      ...
    ]
    const Components = itemToComponent[activeItem].component
    
  return (
    
      {<Components />}
          <Footer changeMain={setActiveItem}/>
       </>
  );
}

export default App;

Answer 2

您可以创建一个包装所有组件的对象，然后通过使用 activeItem 作为键来使用正确的组件：

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

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

    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';

    const components = { Landing, BookingManagement, BookingTickets, EnterProfile, PersonalArea, Register, SearchResults, ChoosePlace };

    export default function App() {
      const [activeItem, setActiveItem] = useState("Landing");
      const ActiveItemComponent = components[activeItem];

      return (
        <>
          <Header changeMain={setActiveItem} />
          <ActiveItemComponent />
          <Footer changeMain={setActiveItem} />
        </>
      );
    }

Answer 3

而不是

{(activeItem=='landing' ? (
    <Landing changeMain={setActiveItem}/>
  ) : (
    <></>
  ))}

一起去

{activeItem=='landing' && (
    <Landing changeMain={setActiveItem}/>
)}

Answer 4

您可以使用 react-router 实现。或者如果你想在这个组件中处理相同的事情，你可以像下面这样做类似的事情

const getComponent = () => {
  if (condition1) {
    return <Component1/>
  } else if (condition2) {
    return <Component2/>
  }
 
  return <DefaultComponent/>
}

在渲染返回中，您可以像下面这样调用该函数

return (
  {getComponent()}
)

Answer 5

怎么样

const ComponentMap = {
  landing: Landing,
  bookingManagement: BookingManagement,
  bookingTickets: BookingTickets,
  enterProfile: EnterProfile,
  personalArea: PersonalArea,
  register: Register,
  searchResults: SearchResults,
  choosePlace: ChoosePlace
};

function App() {
  const [activeItem, setActiveItem] = useState("landing");

  useEffect(() => {
    console.log(activeItem);
  });

  const ActiveComponent = ComponentMap[activeItem] || React.Fragment;
  const ActiveComponentProps = {};
  if (activeItem === "landing") {
    ActiveComponentProps.changeMain = setActiveItem;
  }
  
  return (
    <>
      <Header changeMain={setActiveItem} />
      <ActiveComponent {...ActiveComponentProps} />
      <Footer changeMain={setActiveItem} />
    </>
  );
}