react props深入使用:children属性、props校验、props的默认值_react props children

目录

一 children属性

1 当组件标签有子节点时,props就会有children属性,children属性的值就是子节点的内容

 2 children属性与普通的props一样,值可以是任意值(文本、react元素、组件、函数..)

 二 props校验

1 props校验的基本使用

 2 props常用校验规则

三 props的默认值

---

一 children属性

1 当组件标签有子节点时,props就会有children属性,children属性的值就是子节点的内容

import React from "react";
import ReactDOM from "react-dom";
 
 
class App extends React.Component {
 
    render() {
        return (
            <div>
                <h1> 123</h1>
                {this.props.children}
            </div>
        )
    }
}
 
 
ReactDOM.render(<App>子节点</App>, document.getElementById("root"));

效果

 

 相当于这样

 2 children属性与普通的props一样,值可以是任意值(文本、react元素、组件、函数..)

 JXL作为子节点

import React from "react";
import ReactDOM from "react-dom";
 
 
class App extends React.Component {
 
    render() {
        return (
            <div>
                <h1> 123</h1>
                {this.props.children}
            </div>
        )
    }
}
 
//JXL作为子节点
ReactDOM.render(<App><p>我是子节点:p标签</p></App>, document.getElementById("root"));

子节点也可以是一个组件

import React from "react";
import ReactDOM from "react-dom";
 
 
class App extends React.Component {
 
    render() {
        return (
            <div>
                <h1> 123</h1>
                {this.props.children}
            </div>
        )
    }
}
 
class Test extends React.Component {
 
    render() {
        return (
            <button>我是button</button>
        )
    }
}
 
//子节点也可以是一个组件
ReactDOM.render(<App><Test/></App>, document.getElementById("root"));

效果

 

 

子节点也可以是一个函数

import React from "react";
import ReactDOM from "react-dom";
 
 
class App extends React.Component {
 
    render() {
        this.props.children()
        return (
            <div>
                <h1> 123</h1>
            </div>
        )
    }
}
 
 
//子节点也可以是一个函数
ReactDOM.render(<App>{()=>alert("这是一个函数子节点")}</App>, document.getElementById("root"));

效果

 二 props校验

1 props校验的基本使用

问题: 组件的创建者和使用者不是同一个人,如果传入的数据格式不对, 可能会导致组件内部报错,组件的使用者不知道明确的错误原因

解决办法: 使用props校验 → 允许在创建组件的时候,就指定props的类型、格式等
使用props校验作用: 捕获错误,给出明确的提示,增加组件的健壮性

使用步骤:
1 安装包:npm i prop-types

2 导入prop-types包
3 使用组件名.propType={} 添加校验规则

import React from "react";
import ReactDOM from "react-dom";
 
// 2 导入prop-types包
import PropTypes from "prop-types"
 
class App extends React.Component {
 
    render() {
        const arr = this.props.colors
        const list=arr.map(
            (item,index)=><li key={index}>{item}</li>
        )
        return (
            <ul>
                {list}
            </ul>
        )
    }
}
//3 使用组件名.propType={} 添加校验规则
App.propTypes={
    //约束组件的colors为数组类型
    colors:PropTypes.array
}
//此处传了一个不符合规范的类型
ReactDOM.render(<App colors={19}/>, document.getElementById("root"));
// ReactDOM.render(<App colors={['red','yellow']}/>, document.getElementById("root"));

控制台有明确的错误原因

 修改代码改成正确的类型

//此处传了一个不符合规范的类型
//ReactDOM.render(<App colors={19}/>, document.getElementById("root"));
ReactDOM.render(<App colors={['red','yellow']}/>, document.getElementById("root"));

 2 props常用校验规则

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

// 使用组件名.propType={} 添加校验规则
App.propTypes={
    //常见类型:array、bool、func、number、object、string
    a:PropTypes.number,
    //函数类型,且是必填项
    fn:PropTypes.func.isRequired,
    //tag属性是react的元素(element)
    tag:PropTypes.element,
    //shape:特定的结构 area是string类型,price是数字类型
    filter:PropTypes.shape({
        area:PropTypes.string,
        price:PropTypes.number
    })
 
}
 
ReactDOM.render(<App fn={()=>{}}/>, document.getElementById("root"));

三 props的默认值

格式:  组件.defaultProps={}

作用: 给props设置默认值,在未传入props时生效

import React from "react";
import ReactDOM from "react-dom";
 
class App extends React.Component {
 
    render() {
        return(
            <div>
                <h1>值:{this.props.pageSize}</h1>
            </div>
        )
    }
}
 
//添加props默认值
App.defaultProps={
    pageSize:10
}
 
ReactDOM.render(<App/>, document.getElementById("root"));

预览

 

 传入props,默认值不再生效

ReactDOM.render(<App pageSize={20}/>, document.getElementById("root"));