TypeScript-React Native：嵌套三元表达式的最佳写法是什么？

你的示例代码里，嵌套三元表达式不仅可读性差，还存在大量重复逻辑，后续维护或修改样式规则时容易出错。下面是几种更易读、更规范的优化方案：

方案1：提取逻辑到独立函数 #

把样式判断逻辑抽成可复用的函数，组件内只需要调用函数传参即可，逻辑集中且清晰。

import { TouchableOpacity } from 'react-native';

// 抽离样式判断逻辑，支持传入目标状态（A/B）
const getButtonStyle = (darkMode: boolean, filterState: string, targetState: string) => {
  if (darkMode) {
    return filterState === targetState ? styles.activeButtonDark : styles.buttonDark;
  }
  return filterState === targetState ? styles.activeButton : styles.button;
};

// 组件中调用
<TouchableOpacity style={getButtonStyle(darkMode, filterState, 'A')}>
  {/* 按钮内容 */}
</TouchableOpacity>

<TouchableOpacity style={getButtonStyle(darkMode, filterState, 'B')}>
  {/* 按钮内容 */}
</TouchableOpacity>

方案2：使用对象映射表 #

用层级对象替代嵌套三元，状态与样式的对应关系一目了然，适合规则固定的场景。

import { TouchableOpacity } from 'react-native';

// 定义样式映射表，TypeScript可添加类型注解保证类型安全
const buttonStyleMap = {
  dark: {
    active: styles.activeButtonDark,
    default: styles.buttonDark,
  },
  light: {
    active: styles.activeButton,
    default: styles.button,
  },
};

// 组件中使用
<TouchableOpacity
  style={
    buttonStyleMap[darkMode ? 'dark' : 'light'][
      filterState === 'A' ? 'active' : 'default'
    ]
  }
>
  {/* 按钮内容 */}
</TouchableOpacity>

<TouchableOpacity
  style={
    buttonStyleMap[darkMode ? 'dark' : 'light'][
      filterState === 'B' ? 'active' : 'default'
    ]
  }
>
  {/* 按钮内容 */}
</TouchableOpacity>

方案3：样式数组组合 #

利用React Native支持数组组合样式的特性，拆分基础样式与激活样式，逻辑更贴合样式的使用习惯。

import { TouchableOpacity } from 'react-native';

// 拆分基础样式和激活样式
const baseStyles = {
  dark: styles.buttonDark,
  light: styles.button,
};

const activeStyles = {
  dark: styles.activeButtonDark,
  light: styles.activeButton,
};

// 组件中组合样式
<TouchableOpacity
  style={[
    baseStyles[darkMode ? 'dark' : 'light'],
    filterState === 'A' && activeStyles[darkMode ? 'dark' : 'light'],
  ]}
>
  {/* 按钮内容 */}
</TouchableOpacity>

<TouchableOpacity
  style={[
    baseStyles[darkMode ? 'dark' : 'light'],
    filterState === 'B' && activeStyles[darkMode ? 'dark' : 'light'],
  ]}
>
  {/* 按钮内容 */}
</TouchableOpacity>

通用最佳实践原则 #

• 避免两层以上的嵌套三元：多层嵌套会大幅降低代码可读性，优先用函数、对象映射替代。
• 抽离重复逻辑：不要重复编写相同的判断规则，减少冗余代码，降低维护成本。
• 优先可读性：代码是写给人看的，不要为了“简洁”牺牲可读性，if-else、对象映射往往比嵌套三元更易懂。
• 保证TypeScript类型安全：给函数参数、映射表添加类型注解，避免类型错误，比如给buttonStyleMap添加Record类型约束。

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