JSX中如何在if判断内使用三元运算符嵌套if-else逻辑？

你需要实现的两层条件渲染逻辑如下：

if (declineButtonMessage) {
    if (buttonDirection === 'column') {
        // 渲染StyledDeclineButton
    } else {
        // 渲染SecondaryButton
    }
}

你当前使用&&做第一层条件判断的基础结构是可行的，塞入三元表达式后触发linter报错，通常是JSX解析规则下的格式、闭合问题导致，直接按下面的写法修正即可。

写法1：直接嵌套三元（适配你现有代码结构） #

把完整三元表达式放入&&后的括号内，注意对齐缩进、保证标签自闭合格式正确，避免触发JS自动分号插入的解析异常：

{declineButtonMessage && (
  buttonDirection === 'column'
    ? <StyledDeclineButton
        buttonDirection={buttonDirection}
        title={declineButtonMessage}
        wide
        onPress={onSecondaryAction}
      />
    : <SecondaryButton
        buttonDirection={buttonDirection}
        title={declineButtonMessage}
        wide
        onPress={onSecondaryAction}
      />
)}

小提示：不要把JSX标签的起始<单独放在行首，否则部分解析器会把它当成独立语句打断表达式，直接触发语法报错。

写法2：提前抽离渲染逻辑（可读性更强） #

如果后续要新增更多判断分支，推荐把按钮渲染逻辑提前抽离，避免JSX中嵌套过深的表达式，从根源上减少语法错误概率：

// 写在组件return语句之前的逻辑区
const getActionButton = () => {
  if (!declineButtonMessage) return null;
  const commonProps = {
    buttonDirection,
    title: declineButtonMessage,
    wide: true,
    onPress: onSecondaryAction
  }
  return buttonDirection === 'column'
    ? <StyledDeclineButton {...commonProps} />
    : <SecondaryButton {...commonProps} />
}

// JSX渲染区直接调用
{getActionButton()}

这种写法还能把两个按钮共用的props抽离出来，减少重复代码。

常见触发报错的原因排查 #

• 自闭合组件末尾漏写/，比如将<Component />错写为<Component >
• 括号、尖括号不配对，存在漏写的闭合符号
• 组件属性写法错误，比如字符串类型的prop漏写引号、变量类型的prop漏写{}包裹
• 换行时将三元运算符?/:放在行首，触发解析异常

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