taro 如何使用dom_如何在taro的map循环中使用if条件渲染

在taro的jsx中，鉴于编译的机制，官方明确的表示了不能在map循环中使用if循环，

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

链接奉上：https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/if-statement-in-map-loop.md

但是我再想，如果我有多个条件去判断呢，难道我只能去进行三目套三目吗？

如下(使用的简单的ts)：

import Taro, {Component} from '@tarojs/taro'

import {View, Text, Button} from '@tarojs/components'

import connect from "../../containers/counter"

import {ComponentClass} from "react";

type PageOwnProps = {

}

type PageStateProps = {}

type PageState = {

listArr: string[]

}

type IProps = PageOwnProps & PageStateProps

interface List {

props: IProps,

state: PageState

}

@connect

class List extends Component {

constructor() {

super(...arguments);

this.state = ({

listArr: ["one", "two", "three"]

})

}

public render() {

return (

{

this.state.listArr.map((item, index) => {

return index === 0 ?

index =0 item is {item} :

index === 1 ?

index = 1 item is {item} :

null

})

}

)

}

}

export default List as ComponentClass

确实可以达到效果，但是这样写起来层级嵌套的很深了，很不好看，在咨询了taro作者隔壁老李以后，把循环的内容抽出来做子组件，把index和item，当作参数传递给子组件，在子组件里面使用if即可：

import Taro, {Component} from '@tarojs/taro'

import {View, Text, Button} from '@tarojs/components'

import connect from "../../containers/counter"

import {ComponentClass} from "react";

import ListItem from './listItem'

type PageOwnProps = {

}

type PageStateProps = {}

type PageState = {

listArr: string[]

}

type IProps = PageOwnProps & PageStateProps

interface List {

props: IProps,

state: PageState

}

@connect

class List extends Component {

constructor() {

super(...arguments);

this.state = ({

listArr: ["one", "two", "three"]

})

}

public render() {

return (

{this.state.listArr.map((item, index) => {

return

})}

)

}

}

export default List as ComponentClass

子组件listItem.tsx:

import {ComponentClass} from 'react'

import {Component} from '@tarojs/taro'

import {View} from '@tarojs/components'

type PageStateProps = {

counter: {}

}

type PageDispatchProps = {}

type PageOwnProps = {

propIndex: number,

propItem: any

}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface ListItem {

props: IProps;

state: PageState

}

class ListItem extends Component implements ListItem {

render() {

let resultDom: any = null;

if (this.props.propIndex === 2) {

resultDom =

prop is 2 ,item is {this.props.propItem}

}else{

resultDom =

prop is no 2 ,item is {this.props.propItem}

}

return (

{resultDom}

)

}

}

export default ListItem as ComponentClass

完美解决