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