目錄

一 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"));

?

?