First, conditional rendering

Conditional rendering refers to rendering different pages according to different conditions.

Taro can use the if or conditional operators to create elements that represent the current state.

1.1 The if operator

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 
    // Use the if operator to determine the content of an element variable
    if(this.state.age < 18 ){
      info = <Text style="color:red; margin-top:12px;">Limit for minors: 2 hours</Text>
    }
    return (
      <View className='introduce'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<View>// Display element variable {info}</View>
      </View>)}}Copy the code

1.2 Conditional operators

Conditional operators are also called ternary operators or conditional expressions: 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'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<View>
          <Text style="color:red; margin-top:12px;">{ this.state.age<18? 'Minors limit game duration :2 hours ':' Please inside'}</Text>
        </View>
      </View>)}}Copy the code

In simple conditional scenarios: Conditional expressions are easy to write and the reading experience is more concise.

1.3 Logical operators&& 和 ||

Can use the javascript && and | | operators features, consistent with the 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'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<View>
          <Text style="color:red; margin-top:12px;">{this.state.age < 18 && 'Minors limit game duration :2 hours'}</Text>
        </View>
      </View>)}}Copy the code

Second, list rendering

List rendering is circular rendering, which means rendering the same component/element multiple times. Taro uses the map method of arrays to generate an array of elements, and then renders the array of elements onto the page:

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

export default class Index extends Component {
    state = {
        list: [{name: 'the piano'.desc: As acting commander of the Zephyr Order, Jean has always done her duty to bring peace to the people. She is not a natural, but through hard work, she is now on her own. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616591036729.png'
            },
            {
                name: 'says amber'.desc: 'A spirited maiden, the only scouting knight in The city of Mond. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616592448011.png'
            }, {
                name: 'lisa'.desc: 'She's an intellectual siren who loves sleep. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617000181697.png'
            }, {
                name: 'turning'.desc: 'In the Zephyr Order, Kaia was the most trusted lieutenant of the acting colonel. Any task entrusted to him can always be solved. '.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>)}}Copy the code

Effect:

Three, notes

Taro, JSX will compile into a wechat applet template string, so you cannot treat the template generated by the map function as an array.

When you need to do this, you should first process the array to loop over and then call the map function with the processed array:

// Suppose we want to show female characters
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: 'the piano'.desc: As acting commander of the Zephyr Order, Jean has always done her duty to bring peace to the people. She is not a natural, but through hard work, she is now on her own. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616591036729.png'.sex:'female'
            },
            {
                id:'002'.name: 'says amber'.desc: 'A spirited maiden, the only scouting knight in The city of Mond. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030616592448011.png'.sex:'female'
            }, 
            {
                id:'003'.name: 'lisa'.desc: 'She's an intellectual siren who loves sleep. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617000181697.png'.sex:'female'
            }, 
            {
                id:'004'.name: 'turning'.desc: 'In the Zephyr Order, Kaia was the most trusted lieutenant of the acting colonel. Any task entrusted to him can always be solved. '.avatar: 'https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617001674227.png'.sex:'male'}}]render() {
        // Process the data first
        let female = this.state.list.filter((hero) = >{
            return hero.sex === 'female'
        }) 
        // Use the map method to generate an array of elements
        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>Female characters</Text>
                { femaleHeroList }
            </View>)}}Copy the code