React组件进阶之children属性,props校验与默认值以及静态属性static

一、children属性

• children 属性：表示该组件的子节点，只要组件有子节点，props就有该属性
• children 属性与普通的 props 一样，值可以是任意值（文本、React元素、组件，甚至是函数）

核心代码

import React from 'react'import ReactDOM from 'react-dom/client'const Hello = (props) => {return <div>我是组件{props.children}</div>
}
const divBox = (<div><Hello><ul><li>我是子组件里边的内容</li></ul></Hello></div>
)
ReactDOM.createRoot(document.querySelector('#root')).render(divBox)

二、props校验

2.1 props说明

• 官网说明地址
• 对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据
• 如果传入的数据格式不对，可能会导致组件内部报错，关键是：组件的使用者不能很明确的知道错误的原因

// 假设，这是 小明 创建的 List 组件
const List = props => {const arr = props.colorsconst lis = arr.map((item, index) => <li key={index}>{item.name}</li>)return (<ul>{lis}</ul>)
}// 小红使用小明创建的 List 组件
<List colors={19} />

控制台会出现以下报错

• props校验：允许在创建组件的时候，就约定props的格式、类型

此时 控制台报错会更加明细

2.2 prop-types的安装

• 1.安装属性校验的包：npm i prop-types
• 2.导入prop-types包

import PropTypes from 'prop-types'

• 3.使用组件名.propTypes = {} 来给组件 List 的props添加校验规则
• 4.为组件添加 propTypes 属性，并通过 PropTypes 对象来指定属性的类型

核心代码

import PropTypes from 'prop-types'const List = props => {const arr = props.colorsconst lis = arr.map((item, index) => <li key={index}>{item.name}</li>)return <ul>{lis}</ul>
}List.propTypes = {colors: PropTypes.array
}

2.3 props校验规则

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

核心代码

// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number
})

2.4 props默认值

• 通过defaultProps可以给组件的props设置默认值，在未传入props的时候生效

为函数组件添加 props 默认值

function App(props) {return (<div>此处展示props的默认值：{props.pageSize}</div>)
}
// 方式一 推荐通过函数参数默认值，来提供 props 默认值
const App = ({ pageSize = 10 }) {return (<div>此处展示props的默认值：{props.pageSize}</div>)
}// 方式二 设置默认值 
App.defaultProps = {pageSize: 10
}
// 不传入pageSize属性
<App />

为类组件添加 props 默认值

class App extends Component {// 方式二：或者使用静态属性：static defaultProps = {pageSize: 10}render() {return (<div>此处展示props的默认值：{this.props.pageSize}</div>)}
}
// 方式一：设置默认值
// App.defaultProps = {
//	 pageSize: 10
// }// 不传入pageSize属性
<App />

三、静态属性static

• 实例成员：通过实例对象调用的属性或者方法，叫做实例成员（属性或者方法）
• 静态成员：通过类或者构造函数本身才能访问的属性或者方法

核心代码

class Person {// 实例属性name = 'zs'// 实例方法sayHi() {console.log('哈哈')}// 静态属性static age = 18// 静态方法static goodBye() {console.log('byebye')}
}
const p = new Person()console.log(p.name) 		// 访问实例属性
p.sayHi()								// 调用实例方法console.log(Person.age)	// 访问静态属性
Person.goodBye()				// 调用静态方法

示例代码

class List extends Component {static propTypes = {colors: PropTypes.array,gender: PropTypes.oneOf(['male', 'female']).isRequired}static defaultProps = {gender: ''}render() {const arr = this.props.colorsconst lis = arr.map((item, index) => <li key={index}>{item.name}</li>)return <ul>{lis}</ul>}
}