[Taro入门：6] 条件渲染与列表渲染

一、条件渲染

条件渲染是指根据不同的条件渲染展示不同的页面内容。

Taro中可以使用if操作符或条件运算符来创建表示当前状态的元素。

1.1 if 操作符

import { Component } from 'react'
import { View,Button,Text } from '@tarojs/components'
import Taro from '@tarojs/taro'

export default class Index extends Component {
  state = {
    age:10
  };
  render () {
    let info =null 
    // 使用if操作符，进行条件判断，决定元素变量的内容
    if(this.state.age < 18 ){
      info = <Text style="color:red; margin-top:12px;">未成年人限制游戏时长：2小时</Text>
    }
    return (
      <View className='introduce'>
        《原神》是一款开放世界冒险游戏，这意味着从你踏入「提瓦特」的第一刻起，只要合理规划自己的体力，不论翻山越岭、还是横渡江河，总有办法见到新的风景。
        <View>
            // 显示元素变量
          { info }
        </View>
      </View>
    )
  }
}

1.2 条件运算符

条件运算符也称作三元运算符或条件表达式：condition?true:false

import { Component } from 'react'
import { View,Button,Text } from '@tarojs/components'
import Taro from '@tarojs/taro'

export default class Index extends Component {
  state = {
    age:20
  };
  render () {
    return (
      <View className='introduce'>
        《原神》是一款开放世界冒险游戏，这意味着从你踏入「提瓦特」的第一刻起，只要合理规划自己的体力，不论翻山越岭、还是横渡江河，总有办法见到新的风景。
        <View>
          <Text style="color:red; margin-top:12px;">
            { this.state.age<18?'未成年人限制游戏时长:2小时':'客官里面请' }
          </Text>
        </View>
      </View>
    )
  }
}

在简单的条件场景下：条件表达式便于编写，阅读体验更加简洁。

1.3 逻辑运算符 && 和 ||

可以利用javascript中 && 和 ||运算符的特性，达到与if一致的效果

import { Component } from 'react'
import { View,Button,Text } from '@tarojs/components'
import Taro from '@tarojs/taro'

export default class Index extends Component {
  state = {
    age:10
  };
  render () {
    return (
      <View className='introduce'>
        《原神》是一款开放世界冒险游戏，这意味着从你踏入「提瓦特」的第一刻起，只要合理规划自己的体力，不论翻山越岭、还是横渡江河，总有办法见到新的风景。
        <View>
          <Text style="color:red; margin-top:12px;">
            { this.state.age < 18 && '未成年人限制游戏时长:2小时' }
          </Text>
        </View>
      </View>
    )
  }
}

二、列表渲染

列表渲染即循环渲染，是指多次渲染同一种组件/元素。 Taro中使用数组的map方法生成元素数组，然后将元素数组渲染到页面上：

import { Component } from 'react'
import { View, Image } from '@tarojs/components'
import './hero-list.scss'

export default class Index extends Component {
    state = {
        list: [
            {
                name: '琴',
                desc: '身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616591036729.png'
            },
            {
                name: '安柏',
                desc: '活泼率直的少女，是蒙德城中唯一的侦察骑士。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616592448011.png'
            }, {
                name: '丽莎',
                desc: '她是钟情于睡眠的知性魔女。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617000181697.png'
            }, {
                name: '凯亚',
                desc: '在西风骑士团里，凯亚是代理团长最信任的副手。凡是交托于他的任务，总能得到解决。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617001674227.png'
            }
        ]
    }
    render() {
        let heroList = this.state.list.map((hero) => {
            return (
                <View className="hero-info">
                    <Image className="hero-avatar" src={hero.avatar}></Image>
                    <View className="hero-info__right">
                        <View className="hero-name"> {hero.name} </View>
                        <View className="hero-desc"> {hero.desc} </View>
                    </View>
                </View>
            )
        })
        return (
            <View>
                { heroList }
            </View>
        )
    }
}

效果：

三、注意事项

Taro 中，JSX 会编译成微信小程序模板字符串，因此你不能把 map 函数生成的模板当做一个数组来处理。

当你需要这么做时，应该先处理需要循环的数组，再用处理好的数组来调用 map 函数：

// 假设我们想要显示女性角色
import { Component } from 'react'
import { View, Image,Text } from '@tarojs/components'
import './hero-list.scss'

export default class Index extends Component {
    state = {
        list: [
            {
                id:'001',
                name: '琴',
                desc: '身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616591036729.png',
                sex:'female'
            },
            {
                id:'002',
                name: '安柏',
                desc: '活泼率直的少女，是蒙德城中唯一的侦察骑士。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616592448011.png',
                sex:'female'
            }, 
            {
                id:'003',
                name: '丽莎',
                desc: '她是钟情于睡眠的知性魔女。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617000181697.png',
                sex:'female'
            }, 
            {
                id:'004',
                name: '凯亚',
                desc: '在西风骑士团里，凯亚是代理团长最信任的副手。凡是交托于他的任务，总能得到解决。',
                avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617001674227.png',
                sex:'male'
            }
        ]
    }
    render() {
        // 先对数据进行处理
        let female = this.state.list.filter((hero)=>{
            return hero.sex === 'female'
        }) 
        // 再使用map方法生成元素数组
        let femaleHeroList = female.map((hero) => {
            return (
                <View className="hero-info" key={hero.id}>
                    <Image className="hero-avatar" src={hero.avatar}></Image>
                    <View className="hero-info__right">
                        <View className="hero-name"> {hero.name} </View>
                        <View className="hero-desc"> {hero.desc} </View>
                    </View>
                </View>
            )
        })
        return (
            <View className='index'>
                <Text>女性角色</Text>
                { femaleHeroList }
            </View>
        )
    }
}