React1.3条件渲染与数据循环

App.js

import React, { Component } from 'react'
import PropsChild from './PropsChild'
export default class App extends Component {
  render() {
    return (
      <div>
    <PropsChild title="大镁铝又来了，嘿嘿嘿"></PropsChild>
         
      </div>
    )
  }
}

PropsChild.js

//第一种 class组件使用
import React, { Component } from 'react'

export default class PropsChild extends Component {
    constructor(props){
        super(props)
        this.state={
          showTitle:true,
          women:[
              {name:'张歆艺',age:38},
              {name:'张馨予',age:37},
              {name:'张予馨',age:36},
              {name:'张雨欣',age:35},
              {name:'张艺馨',age:34}
          ]
        }
        setTimeout(()=>{
            this.setState({
                showTitle:false
            })
        },3000)
      }
    render() {
        //条件渲染第一种
    //     return (
    //         <div>{this.state.showTitle?
    // <h1>{this.props.title}</h1>:null}
    //         </div>
    //     )

        //条件渲染第二种
        // let result=this.state.showTitle?<h1>{this.props.title}</h1>:null

        //条件渲染第三种
        let result
        if(this.state.showTitle){
            result=(
                <h1>{this.props.title}</h1>
            )            
        }else{
            result=null
        }
        return (
          <div>{result}
    <ul>{this.state.women.map(item=>{
        return<li key={item.name}>
    <span>姓名：{item.name}</span>
    <span>年龄（假的）：{item.age}</span>
        </li>
    })}</ul>
          </div>
        )
    }
}