taro map循环里的if判断

taro 不支持 map 里嵌套if

1083235-20181210170134778-431807563.png

官方也给出了解决办法，那就是提取变量或者是用三目运算嵌套的方法

1083235-20181210170431471-473387170.png

实践

 {
           this.state.telephone.map((n,index)=>{
             
              return index+1 === jodDate.telephone.length?
              <View key={n} className="item-phone" onClick={this.makePhoneCall.bind(this,n)}>{n}</View>
               : 
               <View key={n} className="item-phone" onClick={this.makePhoneCall.bind(this,n)}>{n}、</View>
            
           })
         }  

当判断条件过多时，最优的解决方案是把循环的内容抽出来做子组件，把index和item，当作参数传递给子组件，在子组件里面使用if

父组件

return (
      <View className={'index'}>
        {this.state.listArr.map((item, index) => {
          return <ListItem propIndex={index} propItem={item}>
          </ListItem>
        })}
      </View>)
  }

子组件

render() {
    let resultDom: any = null;
    if (this.props.propIndex === 2) {
      resultDom = <View>
        prop is 2 ,item is {this.props.propItem}
      </View>
    }else{
      resultDom = <View>
        prop is no 2 ,item is {this.props.propItem}
      </View>
    }
    return (
      <View>
        {resultDom}
      </View>
    )
  }