如何在React函数式组件中实现简洁可读的条件渲染逻辑？

你当前的三元运算符写法功能正常但冗余度高，最适配该场景的优化方式是使用组件映射表，将state的字符串取值和对应组件、需要传递的props做绑定，直接按取值渲染即可，优化后代码如下：

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

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

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

  // 组件映射表：key为state的取值，value对应组件和要传递的props
  const componentMap = {
    landing: {
      Component: Landing,
      props: { changeMain: setActiveItem }
    },
    bookingManagement: {
      Component: BookingManagement,
      props: {}
    },
    bookingTickets: {
      Component: BookingTickets,
      props: {}
    },
    enterProfile: {
      Component: EnterProfile,
      props: {}
    },
    personalArea: {
      Component: PersonalArea,
      props: {}
    },
    register: {
      Component: Register,
      props: {}
    },
    searchResults: {
      Component: SearchResults,
      props: {}
    },
    choosePlace: {
      Component: ChoosePlace,
      props: {}
    }
  };

  // 取出当前要渲染的组件和props
  const { Component, props } = componentMap[activeItem] || {};

  return (
    <>
      <Header changeMain={setActiveItem} />
      {/* 仅一行逻辑完成条件渲染 */}
      {Component && <Component {...props} />}
      <Footer changeMain={setActiveItem} />
    </>
  );
}

export default App;

该方案的优势：

• 完全兼容函数式组件的写法，不影响任何hooks的使用
• 后续新增页面仅需要在componentMap中新增对应配置即可，无需修改渲染逻辑
• 所有组件的props配置统一维护，可读性和可维护性大幅提升

如果后续有更复杂的多条件组合渲染逻辑，也可以把渲染逻辑抽成单独的工具函数，在return中直接调用即可，避免JSX中嵌套大量判断逻辑。

内容的提问来源于stack exchange，提问作者Alexei