React中Props的详细使用和props的校验

props中的children属性

组件标签只用有子节点的时候,props就会有该属性;
children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数)

组件: <ClassCom> 传递的数据  </ClassCom>
这样的组件标签中就会有子节点

props中的children的简单使用

<!-- 主页面 -->
import React from 'react';
import ReactDOM from 'react-dom'; 
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>传递的数据</ClassCom>,document.getElementById('root'))

子组件
import React from "react";
// 函数组件
// const ClassCom = (props) => {
//     return (
//         <div>
//             <h2>组件</h2>
//             { props.children }
//         </div>
//     )
// }

// 类组件
class ClassCom extends React.Component{
    render() { 
        return (
            <div>
                <p>-------我是子组件--------</p>
                {this.props.children}
            </div>
        )
    }
}

export default ClassCom

props中children的属性是标签

<!-- 主页面 -->
import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>
  <p>我是一个p标签</p>
</ClassCom>, document.getElementById('root'))


<!-- 子组件 -->
import React from "react";
// 类组件
class ClassCom extends React.Component{
    render() { 
        return (
            <div>
                <p>-------我是子组件--------</p>
                {this.props.children}
            </div>
        )
    }
}
export default ClassCom

props的校验

为什么会有props的校验。因为props是外来的。
我们无法保证使用者传递过来的参数是什么格式的。
如果我们这个props是数组，而使用者传递的是数字。
这个时候会出现意想不到的后果。
所以我们需要对props进行校验，如props的类型，格式。

校验步骤

1.需要安装一个包 yarn add prop-types 或者 npm i prop-types
2.导包 import PropTypes from 'prop-types'
3. 组件名.PropTypes = { 属性:PropTypes.类型 }

PropTypes的类型有

PropTypes.array    数组
PropTypes.bool     布尔
PropTypes.func     函数
PropTypes.number
PropTypes.object
PropTypes.string

props校验的简单使用

//组件
import React from "react";
// 导包
import PropTypes from 'prop-types'
// 类组件
class ClassCom extends React.Component{
    render() { 
        return (
            <div>
                {
                    this.props.arr.map(item => <li key={item.id }> { item.name}</li>)
                }
                 数字： {this.props.num }
            </div>
        )
    }
}
ClassCom.propTypes  = {
    // 希望传递过来的arr是数组
    arr: PropTypes.array,
    num:PropTypes.number
}
export default ClassCom

当传递的数据不符合条件的时候

import React from 'react'; 
import ReactDOM from 'react-dom';
import ClassCom from "./components/ClassCom"
const list = [{name:'李大为',id:1},{name:'夏洁',id:2}]
ReactDOM.render(<ClassCom arr={list} num={100}></ClassCom>, document.getElementById('root'))

Props的约束规则

// num属性是必填写的
num: PropTypes.number.isRequired,

// 特定结果的对象
myObj: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
    sex:PropTypes.bool
})

// 表示是一个React元素
tag:PropTypes.element

Props的默认值的设置

// ClassCom是组件名称
ClassCom.defaultProps = {
    pageSize:10
}

使用的时候 页数: { this.props.pageSize}

Props限制的简单使用

import React from 'react';
import ReactDOM from 'react-dom'; 
import ClassCom from "./components/ClassCom"
const list = [{ name: '李大为', id: 1 }, { name: '夏洁', id: 2 }]
const obj = {
  name: 123, //这个类型不正确
  sex: '男',
  age:18
}
ReactDOM.render(<ClassCom arr={list} num={100} myObj={ obj}></ClassCom>, document.getElementById('root'))

import React from "react";
// 导包
import PropTypes from 'prop-types'
// 类组件
class ClassCom extends React.Component{
    render() { 
        return (
            <div>
                {
                    this.props.arr.map(item => <li key={item.id }> { item.name}</li>)
                }
                数字： {this.props.num}
                页数 { this.props.pageSize}
            </div>
        )
    }
}
ClassCom.propTypes  = {
    // 希望传递过来的arr是数组
    arr: PropTypes.array,
    // num属性是必填写的
    num: PropTypes.number.isRequired,
    // 特定结果的对象
    myObj: PropTypes.shape({
        name: PropTypes.string,
        age: PropTypes.number,
        sex:PropTypes.bool
    }),
    // 表示是一个React元素
    tag: PropTypes.element
}
<!-- 这是默认值 -->
ClassCom.defaultProps = {
    pageSize:10
}
export default ClassCom