React条件渲染设计模式：如何实现可扩展可维护的render函数逻辑？

核心采用配置表驱动渲染的设计思路，彻底替代冗长的if-else判断，完全满足「新增组件无需修改原有旧代码」的开闭原则要求。

实现步骤 #

1. 抽离独立的流程配置表 #

把所有步骤的组件、参数、透传属性都统一收敛到一个配置数组中，数组下标天然和你现有的flowComponentNumber状态匹配，配置可以单独抽成flowConfig.js文件维护，和组件逻辑完全解耦：

// flowConfig.js
import LoginForm from "./forms/LoginForm";
import MenuForm from "./forms/MenuForm";
import HomeForm from "./forms/HomeForm";
import TermsForm from "./forms/TermsForm";
import IdentificationResultForm from "./forms/IdentificationResultForm";
import CompanyForm from "./forms/CompanyForm";
import ListViewForm from "./forms/ListViewForm";
import PartDetails from "./forms/PartDetails";
import ThemeForm from "./forms/ThemeForm";

export const FLOW_CONFIG = [
  {
    component: LoginForm,
    now: 10,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: HomeForm,
    now: 20,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: TermsForm,
    now: 30,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: IdentificationResultForm,
    now: 40,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: MenuForm,
    now: 50,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: ListViewForm,
    now: 60,
    getProps: (context) => ({ handler: context.handleChildSubmit, languageHandler: context.handleLanguage })
  },
  {
    component: PartDetails,
    now: 70,
    getProps: (context) => ({ handler: context.handleChildSubmit, languageHandler: context.handleLanguage })
  },
  {
    component: ThemeForm,
    now: 80,
    getProps: (context) => ({ handler: context.handleChildSubmit })
  },
  {
    component: CompanyForm,
    now: 90,
    getProps: (context) => ({ handler: context.handelSubmit })
  },
  {
    component: () => <h1 style={{ color: "greenyellow" }}> Your submit is successful </h1>,
    now: 100,
    getProps: () => ({})
  }
]

2. 简化render逻辑 #

把原来的十多行if-else判断全部删除，render只需要读取配置渲染即可：

// 导入配置
import { FLOW_CONFIG } from './flowConfig'

export default class TemplateController extends React.Component {
  // ... 原有constructor、handle相关逻辑保持不变

  render() {
    const { flowComponentNumber } = this.state
    // 可自定义兜底逻辑，比如超出配置长度回到第一步或者显示缺省页
    const currentStep = FLOW_CONFIG[flowComponentNumber] || FLOW_CONFIG[0]
    const { component: Component, now, getProps } = currentStep
    return <Component now={now} {...getProps(this)} />
  }
}

后续新增组件操作 #

不需要修改任何原有组件逻辑，只需要在FLOW_CONFIG数组的对应位置新增一条配置项即可完成接入，完全符合你的要求。

进阶优化建议 #

• 如果后续流程需要支持调整顺序、非顺序跳转，可以给每个配置项加唯一stepKey字段，把state里的flowComponentNumber替换为currentStepKey，通过key匹配配置项，调整流程仅需修改配置即可。
• 可在配置项中新增visible字段，支持按权限、前置条件动态控制步骤是否显示，渲染前过滤配置数组即可实现。
• 你现有代码中提交方法拼写为handelSubmit，建议修正为handleSubmit避免后续维护出错。

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