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

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 '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>}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java集合详解

Java集合详解 一、基本概要1.什么是集合2.常见的集合有哪些 二、基本知识1.集合框架底层数据结构1.1 Collection1.2 Map 2.线程安全的集合 三、集合具体讲解0.前沿知识0. ❤关于Iterator 迭代器1.Iterator迭代器是什么&#xff1f;用来干什么&#xff1f;&#xff08;用来遍历集…

Node.js之express框架学习心得

Node.js&#xff1a;颠覆传统的服务器端开发 Node.js是基于Chrome V8引擎构建的JavaScript运行时&#xff0c;它采用了完全不同的开发模型。Node.js使用事件驱动和非阻塞I/O的方式处理请求&#xff0c;通过单线程和异步机制&#xff0c;实现高效的并发处理。这意味着在Node.js中…

AdvancedInstaller打包程序

文章目录 1. AdvancedInstaller 下载2. AdvancedInstaller 启动3. 新建工程4. 配置安装包详细信息5. 配置安装参数6. 添加要打包的文件7. 设置安装完成后启动程序8. 构建打包 1. AdvancedInstaller 下载 下载网址&#xff1a;https://www.advancedinstaller.com/ 2. AdvancedIn…

error: #5: cannot open source input file “core_cmInstr.h“

GD32F103VET6和STM32F103VET6引脚兼容。 GD32F103VET6工程模板需要包含头文件&#xff1a;core_cmInstr.h和core_cmFunc.h&#xff0c;这个和STM32F103还是有区别的&#xff0c;否则会报错&#xff0c;如下&#xff1a; error: #5: cannot open source input file "core…

Springboot之把外部依赖包纳入Spring容器管理的两种方式

前言 在Spring boot项目中&#xff0c;凡是标记有Component、Controller、Service、Configuration、Bean等注解的类&#xff0c;Spring boot都会在容器启动的时候&#xff0c;自动创建bean并纳入到Spring容器中进行管理&#xff0c;这样就可以使用Autowired等注解&#xff0c;…

MQ面试题3

1、讲一讲Kafka与RocketMQ中存储设计的异同&#xff1f; Kafka 中文件的布局是以 Topic/partition &#xff0c;每一个分区一个物理文件夹&#xff0c;在分区文件级别实现文件顺序写&#xff0c;如果一个Kafka集群中拥有成百上千个主题&#xff0c;每一个主题拥有上百个分区&am…

《Vue3+Typescript》一个简单的日历组件实现

这是一个没有套路的前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好&#xff5e; 目录 一、…

架构的分类

目录 一、 RUP41 架构 1.1 RUP41架构方法概述 1.2 RUP41架构总体 1.3 RUP41架构方法内容 1.3.1 逻辑视图 1.3.2 开发视图 1.3.3 物理视图 1.3.4 处理视图 1.3.5 场景视图 ​二、 TOGAF9 架构 2.1 TOGAF9 架构概述 2.2 TOGAF9 架构分类 2.2.1 业务架构 2.2.2 数据架…

【1.3】Java微服务:Spring Cloud版本说明

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 微服务 ✨特色专栏&#xff1a; 知识分享 &#x…

django4.2 day1Django快速入门

1、创建虚拟环境 打开cmd安装virtualenv pip install virtualenvwrapper-winworkon 查看虚拟环境mkvirtualenv 创建新的虚拟环境删除虚拟环境 rmvirtualenv 进入虚拟环境 workon env 2、创建django虚拟环境并安装django 创建虚拟环境mkvirtualenv django4env进入虚拟环境安…

Spring Boot Starter 剖析与实践 | 京东云技术团队

引言 对于 Java 开发人员来说&#xff0c;Spring 框架几乎是必不可少的。它是一个广泛用于开发企业应用程序的开源轻量级框架。近几年&#xff0c;Spring Boot 在传统 Spring 框架的基础上应运而生&#xff0c;不仅提供了 Spring 的全部功能&#xff0c;还使开发人员更加便捷地…

Redis 简介

文章目录 Redis 简介 Redis 简介 Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;远程词典服务器&#xff0c;基于 C/S 架构&#xff0c;是一个基于内存的键值型 NoSQL 数据库&#xff0c;开源&#xff0c;遵守 BSD 协议&#xff0c;Redis 由 C语言 实现。…

P4145 上帝造题的七分钟 2 / 花神游历各国

上帝造题的七分钟 2 / 花神游历各国 题目背景 XLk 觉得《上帝造题的七分钟》不太过瘾&#xff0c;于是有了第二部。 题目描述 "第一分钟&#xff0c;X 说&#xff0c;要有数列&#xff0c;于是便给定了一个正整数数列。 第二分钟&#xff0c;L 说&#xff0c;要能修改…

《向量数据库指南》——腾讯云向量数据库Tencent Cloud VectorDB产品特性,架构和应用场景

腾讯云向量数据库(Tencent Cloud VectorDB)是一款全托管的自研企业级分布式数据库服务,专用于存储、检索、分析多维向量数据。该数据库支持多种索引类型和相似度计算方法,单索引支持 10 亿级向量规模,可支持百万级 QPS 及毫秒级查询延迟。腾讯云向量数据库不仅能为大模型提…

JAVA开发工具-maven的安装与配置(最新最详细教程)

引言 Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具 软件。 Maven 除了以程序构建能力为特色之外&#xff0c;还提供高级项目管理工具。由于 Maven 的缺省构建规则有较 高的可重用性&#xff0c;所以常常用两…

模电专题-MOS管的放大电路分析

在实际应用中&#xff0c;我们经常会使用到功率MOS&#xff0c;这时通常不会将它当成一个开关使用&#xff0c;而是当成一个放大器来使用&#xff0c;那这就需要让其工作在放大状态。 参考下图中的mos管的特性曲线&#xff0c;右图中的输出特性曲线中有一根红色的分界线&#x…

竞速榜实时离线对数方案演进介绍 | 京东云技术团队

一、背景 竞速榜是大促期间各采销群提供的基于京东实时销售数据的排行榜&#xff0c;同样应对大促流量洪峰场景&#xff0c;通过榜单撬动品牌在京东增加资源投入。竞速榜基于用户配置规则进行实时数据计算&#xff0c;榜单排名在大促期间实时变化&#xff0c;相关排名数据在微…

【雕爷学编程】Arduino动手做(181)---Maixduino AI开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

roop 视频换脸

roop: one click face swap. 只用一张人脸图片&#xff0c;就能完成视频换脸。 项目地址&#xff1a; https://github.com/s0md3v/roopColab 部署&#xff1a; https://github.com/dream80/roop_colab 本文是本地部署的实践记录。 环境基础 OS: Ubuntu 22.04.2 LTSKernel: 5…