i. 属性(默认属性与属性验证)

TIP

(1) 在组件上通过key = value 写属性, 通过this. props获取属性
(2) 子组件内通过 this. props获取父组件传递的属性
(3) 注意在传参数的时候，如果写成isShow="true"，那么这是一个字符串
(4) 实例属性定义在constrctor内部，需通过 (new Navbar()). obj 调用实例属性，或通过this. 调用实例属性
(5) 默认属性和属性验证

import React from 'react'

// 子组件
class Navbar extends React. Component{

  // 实例属性
  obj = {

    name: "kerwin"

  }

 // 静态 不需要经过实例化的 类属性
  static defaultProps = {

    myname: "默认的值",
    myshow: true

  }

  // 属性验证
  static propTypes = {

    myname: propsTypes.string
    myshow: propsTypes.bool

  }
  render(){

    // console.log(this.props) 获取属性 (myname myshow)
    return (
      <div>
        Navbar-{this.props.myname}
        
        {/* 模拟的 v-show */}
        <button className={this.props.myshow?'':'hide'}>按钮</button>

        {/* 模拟的 v-if */}
        {
          this.props.myshow?<button>按钮</button>:null
        }
      </div>
    )

  }
}
// 默认属性 （类属性  类名. 属性）
// 废弃的类属性 写法
// Navbar. defaultProps = {
//   myname:"默认的值", 
//   myshow:true
// }

// 父组件
class App extends React. Component{
  render() {

    var obj1 = {
      myname:"home",
      myshow:false
    }
    return (
      <Navbar {...obj1} myshow={true}>
      <Navbar myname="home" myshow={false}>
      <Navbar />
    )

  }
}