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.colors
  const 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.colors
  const 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.colors
    const lis = arr.map((item, index) => <li key={
    
    index}>{
    
    item.name}</li>)
    return <ul>{
    
    lis}</ul>
  }
}