React的属性(props)

React的属性(props)以及属性验证(propTypes)

1、属性props

//父组件
import React,{Component} from 'react'
import Son from './Son.js'

// 函数式组件
const Content=(props)=>{
    //函数式组件不需要this
    return  <h3>233{props.money}</h3>
}

class Father extends Component{
    //static  用来定义 类 自己的属性(自己用)
    static defaultProps={
        poem:'白日依山尽，黄河入海流'
        // 父组件内部自己设置
    }

    render(){
        // 唯一根元素
        return (
            <div>
                <h3>这里是父的诗:{this.props.poem}</h3>
                <hr/>
                {/* 外部传入子组件,在父组件中直接写在子组件上 */}
                <Son name="孩子真棒"/>
                <hr/>
                <Content money="10000"/>
            </div>
        )
    }
}

export default Father

//子组件
import React,{Component} from 'react'

class Son extends Component{
    render(){
        return (
            <div>这里是子组件接收父组件的信息：{this.props.name}</div> 
							//孩子真棒
            )
    }
}

export default Son

2、使用prop-types检查props

安装$ yarn i prop-types ，默认为生产环境安装

在文件中引入import PropTypes from ‘prop-types’

[外链图片转存失败(img-Qh85Z96A-1562839069628)(C:\Users\聪波小样儿\AppData\Roaming\Typora\typora-user-images\1562838410222.png)]

上面是Vue中的属性验证方式，用来做对比

这种属性验证一般用于外部传入子组件，即在子组件中验证父组件传入的属性

Son.propTypes={
    //属性名：PropTypes.数据类型
    //如：name:PropTypes.string
}