React 15中嵌套两个内联if的最佳实现方式是什么？

当然可以在JSX里同时处理多个if判断！你遇到的报错问题主要是因为当前写法存在几个语法和逻辑上的小问题，我来帮你拆解并修正：

你的代码问题分析 #

你用了立即执行函数表达式（IIFE）来包裹条件逻辑，但存在两个核心问题：

1. 函数内部没有收集并返回所有符合条件的JSX元素——单个条件时，函数会隐式返回第一个if后的元素，但多个条件时，第二个元素无法被正确返回，而且JSX不允许直接返回多个未包裹的元素。
2. 多行JSX没有用括号包裹，会被JavaScript解析器当成多个独立语句，导致语法错误。

修正方案1：用IIFE收集并返回元素数组 #

这种方式适合逻辑比较复杂的场景，把符合条件的元素存入数组后统一返回：

<div>
  {(() => {
    const formFields = [];
    
    // 第一个条件判断
    if (VerticalRole === "Software Developer") {
      formFields.push(
        <div key="github-field">
          <label>GITHUB ACCOUNT</label>
          <div className="value">
            <input
              type="text"
              name="github_url"
              className="lowercase"
              defaultValue={this.props.talent.github_url}
              onChange={this.onChangeInput.bind(this)}
            />
          </div>
        </div>
      );
    }
    
    // 第二个条件判断
    if (MarketVetical === "Creative/Marketing") {
      formFields.push(
        <div key="portfolio-field">
          <label>Portfolio Website</label>
          <div className="value">
            <input
              type="text"
              name="personal_website" {/* 这里修正了name属性，和对应的数据字段匹配 */}
              className="lowercase"
              defaultValue={this.props.talent.personal_website}
              onChange={this.onChangeInput.bind(this)}
            />
          </div>
        </div>
      );
    }
    
    return formFields;
  })()}
</div>

修正方案2：用逻辑与（&&）运算符（React推荐的简洁写法） #

如果逻辑不复杂，直接在JSX中使用&&进行条件渲染是更常用的方式，代码更简洁易读：

<div>
  {/* 第一个条件渲染 */}
  {VerticalRole === "Software Developer" && (
    <div>
      <label>GITHUB ACCOUNT</label>
      <div className="value">
        <input
          type="text"
          name="github_url"
          className="lowercase"
          defaultValue={this.props.talent.github_url}
          onChange={this.onChangeInput.bind(this)}
        />
      </div>
    </div>
  )}
  
  {/* 第二个条件渲染 */}
  {MarketVetical === "Creative/Marketing" && (
    <div>
      <label>Portfolio Website</label>
      <div className="value">
        <input
          type="text"
          name="personal_website"
          className="lowercase"
          defaultValue={this.props.talent.personal_website}
          onChange={this.onChangeInput.bind(this)}
        />
      </div>
    </div>
  )}
</div>

额外提醒 #

• 注意第二个input的name属性：你原来的代码里写的是github_url，但对应的数据是personal_website，建议改成匹配的字段名，这样onChange时能正确处理表单数据。
• 如果用数组返回元素，记得给每个元素加上唯一的key属性，避免React的控制台警告。

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