JSX主花括号表达式内嵌套子花括号表达式触发报错如何解决

错误原因 #

你触发的是JSX的基础语法约束：

• 单对{}包裹的范围属于单个JS表达式上下文，只能返回一个合法值，你原来的代码在同一对{}里并列放了两个独立的条件渲染逻辑，相当于同时要返回两个JSX节点，不符合语法要求。
• 同时你在顶层{}内部又嵌套了一对{props.appData && ...}的花括号，相当于在纯JS表达式上下文里误用了JSX的插值语法，就算删掉内部花括号，并列返回两个节点的问题还是存在。

修复方案 #

有两种常用的修复方式，按需选择即可：

方案1：拆成两个独立的表达式块（更推荐，可读性更高）

把两个条件渲染逻辑分别放在各自的{}中，不要包裹在同一对顶层花括号里：

{!isNonParticipatingUser(props) && 
    <LinkContainer to="/contactUs">
        <Dropdown.Item href="#">Contact Us</Dropdown.Item>
    </LinkContainer>
}
{props.appData && props.appData.appProperties &&
    <Dropdown.Item target="_blank" href={getAppPropertiesValue(props, 'link.employee.faq')}>FAQs
    </Dropdown.Item>
}

方案2：用Fragment包裹成单个根节点返回

如果必须放在同一对{}里，用React.Fragment的短语法<></>把两个节点包裹成单个根元素即可：

{
  <>
    {!isNonParticipatingUser(props) && 
      <LinkContainer to="/contactUs">
        <Dropdown.Item href="#">Contact Us</Dropdown.Item>
      </LinkContainer>
    }
    {props.appData && props.appData.appProperties &&
      <Dropdown.Item target="_blank" href={getAppPropertiesValue(props, 'link.employee.faq')}>FAQs
      </Dropdown.Item>
    }
  </>
}

内容的提问来源于stack exchange，提问作者gene b.