需要手机号注册的网站,高端大气网站推荐,品牌推广的步骤和技巧,网站模板全屏React组件进阶之children属性,props校验与默认值以及静态属性static 一、children属性二、props校验2.1 props说明2.2 prop-types的安装2.3 props校验规则2.4 props默认值 三、静态属性static 一、children属性
children 属性#xff1a;表示该组件的子节点#xff0c;只要组… React组件进阶之children属性,props校验与默认值以及静态属性static 一、children属性二、props校验2.1 props说明2.2 prop-types的安装2.3 props校验规则2.4 props默认值 三、静态属性static 一、children属性
children 属性表示该组件的子节点只要组件有子节点props就有该属性children 属性与普通的 props 一样值可以是任意值文本、React元素、组件甚至是函数 核心代码 import React from reactimport ReactDOM from react-dom/clientconst Hello (props) {return div我是组件{props.children}/div
}
const divBox (divHelloulli我是子组件里边的内容/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-types2.导入prop-types包
import PropTypes from prop-types3.使用组件名.propTypes {} 来给组件 List 的props添加校验规则4.为组件添加 propTypes 属性并通过 PropTypes 对象来指定属性的类型 核心代码 import PropTypes from prop-typesconst 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、stringReact元素类型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}
}
