React函数组件中if else/else if多条件渲染实现方法

针对你的需求（根据activeStep的值渲染不同内容），这里给你几种实用的实现方法，都能替代简单的双条件三元表达式：

1. 嵌套三元表达式 #

如果条件不多，嵌套三元是最直接的方式，不用额外写函数：

const GharwapasiForm = () => {
  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    'Click Your Photo',
    'Personal Details',
    'Submit Application',
  ];

  return (
    <FormContainer className='row'>
      <Stepper activeStep={activeStep} className="py-2" >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      
      {/* 多条件渲染内容 */}
      <div className="step-content">
        {activeStep === 1 ? (
          "step one"
        ) : activeStep === 2 ? (
          "This is the step two"
        ) : activeStep === 3 ? (
          "这里是第三步的对应内容"
        ) : (
          // 默认渲染内容（比如step 0时）
          "请开始你的表单流程"
        )}
      </div>
    </FormContainer>
  )
}

export default GharwapasiForm

2. 提取为内部函数（用if-else判断） #

当条件较多时，把渲染逻辑抽到单独函数里，代码可读性更高：

const GharwapasiForm = () => {
  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    'Click Your Photo',
    'Personal Details',
    'Submit Application',
  ];

  // 定义渲染步骤内容的函数
  const renderStepContent = () => {
    if (activeStep === 1) {
      return "step one";
    } else if (activeStep === 2) {
      return "This is the step two";
    } else if (activeStep === 3) {
      return "这里是第三步的对应内容";
    } else {
      return "请开始你的表单流程";
    }
  }

  return (
    <FormContainer className='row'>
      <Stepper activeStep={activeStep} className="py-2" >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      
      {/* 调用函数渲染内容 */}
      <div className="step-content">{renderStepContent()}</div>
    </FormContainer>
  )
}

export default GharwapasiForm

3. 对象映射法（简洁直观） #

把不同step对应的内容存在对象里，通过键值对直接匹配，适合内容固定的场景：

const GharwapasiForm = () => {
  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    'Click Your Photo',
    'Personal Details',
    'Submit Application',
  ];

  // 定义步骤内容映射
  const stepContentMap = {
    1: "step one",
    2: "This is the step two",
    3: "这里是第三步的对应内容",
    0: "请开始你的表单流程" // 默认step 0的内容
  };

  return (
    <FormContainer className='row'>
      <Stepper activeStep={activeStep} className="py-2" >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      
      {/* 通过对象键获取对应内容 */}
      <div className="step-content">{stepContentMap[activeStep]}</div>
    </FormContainer>
  )
}

export default GharwapasiForm

这三种方法都能满足你的多条件渲染需求，你可以根据实际场景选：条件少用嵌套三元，条件多用函数判断，内容固定用对象映射。

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