React 父子组件通讯-属性校验

import React, { Component } from 'react'

import PropTypes from "prop-types"

class ClassCpn extends Component {
  render() {
    let { age, sex, height, name } = this.props
    console.log(this.props)
    return (
      <div>
        <h2>{age + "" + sex + "" + height}</h2>
        <ul>
          {
            name.map(item => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

// 1.属性校验
ClassCpn.propTypes = {
  name: PropTypes.array.isRequired,
  age: PropTypes.number,
  sex: PropTypes.string,
  height: PropTypes.number
}

// 2.给组件写默认值 (当父组件没有传值过来的话,你就可以使用默认的数据)
ClassCpn.defaultProps = {
  name: ['haha', 'hehe', 'heihei'],
  age: 18,
  sex: "男",
  height: 1.88
}




// 3. 类组件还可以这样写属性校验
class ChildCpm extends Component {
  //  前面一定要加:static 校验可以放在组件内部
  static propTypes = {
    name: PropTypes.array.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    height: PropTypes.number
  }

  //   前面一定要加:static 默认值也是可以放到组件中的
  static defaultProps = {
    name: ['haha', 'hehe', 'heihei'],
    age: 18,
    sex: "男",
    height: 1.88
  }
  render() {
    console.log(this.props);  // 这个获取的是 组件中的默认值
    let { age, sex, height, name } = this.props
    return (
      <div>
        <h2>{age + "" + sex + "" + height}</h2>
        <ul>
          {
            name.map(item => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }
}




export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      age: 18,
      sex: "男",
      height: 1.88,
      name: ["huzhenchu", "chguchuhu", "guxiaohu", "zhenchuhu"]
    }
  }
  render() {
    const { age, sex, height, name } = this.state
    return (
      <div>
        <h2>1.类组件传值</h2>
        <ClassCpn age={age} sex={sex} height={height} name={name} />

        <h2>2.当父组件没有传值过来的话,你就可以使用默认的数据</h2>
        <ClassCpn />

        <h3>3.类组件另外一种校验</h3>
        <ChildCpm />
      </div>
    )
  }
}

实际截图: