第2.7章：props：示例-名片

该案例，包含了，三元表达式，和数组列表循环

image.png image.png

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

export class App extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            cardName: '雷佳音',
            cardList: '1234567890',
            cardSpecies: true,
            cardTag: ['权力游戏','团灭发动机','体育健将','单机游戏爱好者'],
        }
    }
    
    render() {
        return (
            <Fragment>
                <div>
                    <h1>{this.state.cardName}</h1>
                        <ul>
                            <li>电话：{this.state.cardList}</li>
                            <li>{this.state.cardSpecies ? '外星生物' : '人类'}</li>
                        </ul>
                    <hr/>
                    <p>
                        好友印象：
                        {this.state.cardTag.map((aaa, index) => (
                            <span key={index}>{aaa}、</span>
                        ))}
                    </p>
                </div>
            </Fragment>
        )
    }
}

export default App