React Native中如何在嵌套map函数内使用if-else条件

嘿，这个问题我之前也碰到过，map里确实不能直接写if语句，但咱们有好几种优雅的方式来实现条件渲染，我给你分享几个实用方案：

1. 用三元表达式直接判断（最简洁） #

在map的回调里，咱们可以通过三元表达式判断当前单元格的值是不是'-'，然后给它应用不同的样式。直接修改你render里的代码就行：

render() {
  return (
    <View style={styles.container}>
      { this.props.buttons.map((row, rowIndex) => (
        <View key={rowIndex} style={styles.contRow}>
          { row.map((col, colIndex) => (
            <TouchableNativeFeedback 
              key={`${rowIndex}-${colIndex}`} // 用行列组合当key，更可靠
              onPress={() => this._handleOnPress(col)} 
              background={TouchableNativeFeedback.SelectableBackground()}
            >
              {/* 这里通过三元表达式切换容器样式 */}
              <View style={col === '-' ? styles.doubleButtonContainer : styles.buttonContainer}>
                <Text style={styles.text}>{col}</Text>
              </View>
            </TouchableNativeFeedback>
          )) }
        </View>
      )) }
    </View>
  );
}

然后你需要在styles.js里新增一个双倍尺寸的样式，比如假设原来的buttonContainer用flex:1来均分宽度，那双倍的就设flex:2：

// styles.js
export default {
  container: {
    // 你的容器样式
  },
  contRow: {
    flexDirection: 'row',
    // 行样式
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    borderWidth: 1,
    // 其他基础样式
  },
  doubleButtonContainer: {
    flex: 2, // 宽度是普通单元格的两倍
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    borderWidth: 1,
    // 可以继承buttonContainer的样式，或者按需调整
  },
  text: {
    fontSize: 18,
  }
};

2. 抽离成单独的渲染函数（逻辑复杂时更清晰） #

如果之后你还要给其他单元格加特殊样式，把单个按钮的渲染逻辑抽成单独函数会让代码更易维护：

// 新增渲染单个按钮的函数
renderButton = (col) => {
  const containerStyle = col === '-' ? styles.doubleButtonContainer : styles.buttonContainer;
  return (
    <TouchableNativeFeedback 
      onPress={() => this._handleOnPress(col)} 
      background={TouchableNativeFeedback.SelectableBackground()}
    >
      <View style={containerStyle}>
        <Text style={styles.text}>{col}</Text>
      </View>
    </TouchableNativeFeedback>
  );
}

render() {
  return (
    <View style={styles.container}>
      { this.props.buttons.map((row, rowIndex) => (
        <View key={rowIndex} style={styles.contRow}>
          { row.map((col, colIndex) => (
            <React.Fragment key={`${rowIndex}-${colIndex}`}>
              {this.renderButton(col)}
            </React.Fragment>
          )) }
        </View>
      )) }
    </View>
  );
}

这样后续要加新的条件判断，直接在renderButton里改就行，不用在map里堆逻辑。

小提醒：关于key的使用 #

你之前用index当key，虽然在数组不会动态增减的情况下没问题，但用${rowIndex}-${colIndex}这种行列组合的key会更可靠，避免React渲染时出现不必要的bug。

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