children属性

• children属性 ：表示该组件的子节点，只要组件有子节点，props 就有该属性
• children 属性与普通的 props 一样，值可以是任意值

可以充当 vue 里 插槽 的作用

组件-插槽 : Dialog.js

return (
	<div>
		<div>this.props.title('默认值')</div>
		<div>this.props.children</div>
	</div>
)

父组件-使用 : index.js

return (
	<Dialog title={(value)=><h4>值为:{value}</h4>}>
    	<input type="text"/>
    </Dialog>
)

propTypes校验

对传递的数据类型进行校验

1. 导入 prop-types 包
2. 使用 组件名.propTypes = {} 来给组件添加校验规则
3. 校验规则通过 PropTypes 对象来指定

import propTypes from "prop-types"

Son.propTypes = {
    money:PropTypes.number,
    list:PropTypes.array
}

约束规则

1. 常见类型： array 、bool 、func 、number 、object 、string
2. React元素类型 ：element
3. 必填项：isRequired
4. 特定结构的对象：shape({})

Son.propTypes = {
    money:PropTypes.number.isRequired,
    list:PropTypes.aray,
    car:Proptypes.shape({
        brand:PropTypes.string.isRequired
        price:PropTypes.number.isRequired
    })
}

组件 - 传值

state = {
    car:{
        brand:'abc',
        price:100
    }
}
<Son money={100} list{[]} car = {this.state.car}></Son>

props默认值

Son.defaultProps = {
    money:0,
    list:[]
}

类的静态成员

//实例成员：通过实例调用的属性或方法

//静态成员：通过类或者构造函数本身才能访问的属性和方法