条件渲染和列表渲染

条件渲染和列表渲染

条件渲染

• 通过三目运算

render () {
    return (
        <Fragment>
        <button onClick = { this.change }> change </button>
        <h3>
            { this.state.flag? '骏哥': '妮妮' }//在state中定义一个数据flag
        </h3>
        <ul>
            { this.renderItem() }
        </ul>
        </Fragment>
    )
}

列表渲染

• 由于react中没有指令，所以只能通过js遍历的方式来渲染列表，下面是基础写法，还有一种优化的写法
• 基础写法

    
render () {
    return (
        <Fragment>
        { //写js之前写个大括号，表示里面的是js语法
            this.state.lists.map( (item,index) => {//通过数组点map的方式遍历
                return (
                    <li key = { item.id }>
                        { item.text }
                    </li>
                )
            })
        }
        </ul>
        </Fragment>
    )
}

• 优化写法
• 由于状态不好控制，所以我们尽量不写状态，而去写属性，我们将上面的代码改成用属性来写，优化一下

import React , { Component,Fragment } from 'react'


const Item = ( props ) => {//props里面是下面父组件传来的数据,返回一段html结构
    return (
        <li > { props.item.text } </li>
    )
}
class DataRender extends Component {
    constructor () {
        super()
        this.state = {
            flag: true,
            lists: [
                {
                    id: 1,
                    text: '商品1'
                },
                {
                    id: 2,
                    text: '商品2'
                },
                {
                    id: 3,
                    text: '商品3'
                }
            ]
        }
    }
    change = () => {
        this.setState({
            flag: !this.state.flag
        })
    }
    renderItem = () => {
        return this.state.lists.map( (item,index) => {//在这里循环，并返回出去
            return <Item item = { item } key = { item.id }></Item>
        })
    }
    render () {
        return (
            <Fragment>
            <ul>
                { this.renderItem() }
            </ul>
            </Fragment>
        )
    }
}
export default DataRender