props.children属性

• children属性：表示组件标签的子节点。当组件标签有子节点是时，props就会又该属性
• chidren属性：可以传递和props一样的数据类型，（文字、react元素、标签、函数、其他数据类型的数据等）

import React from "react"
const Hello = ()=>{
    return(
        <div>
            <Child>这是一段文字</Child>
        </div>
    )
}
const Child = (props)=>{
    return(
        <div>{props.children}</div>
    )
}

---

props 校验

• props 校验：允许在创建组件的时候，就指定props的类型、格式等
• 作用：捕获使用组件是因为 props 导致的错误，给出明确的操作提示，增加组件的健壮性

使用 props 校验

安装

npm install prop-types

使用

import PropTypes from "prop-types"
const App = (props)=>{
    return (
        <h1>{props.colors}</h1>
    )
}
App.propTypes = {
    // 确定 colors 属性为 array 类型
    // 如果类型不得，则报出明确错误，便于分析错误原因
    colors: PropTypes.array
}

约束规则

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

key:PropTypes.func
key:PropTypes.element
key:PropTypes.func.isRequired
key:PropTypes.shape({
    colors:PropTypes.string
    fintSize:PropTypes.number
})

---

props 默认值

给 props 设置默认值，在为传入 props 时生效

import React from "react"
import ReactDOm from "react-dom"
const APP = (props)=>{
    return (
        <div>
            此处展示 props 的默认值 : {props.pageSize}
        </div>
    )
}
// 设置默认值
APP.defaultProps = {
    pageSize:10
}
ReactDOM.render(<APP/>,document.getElementById('root'))

---