React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
所以，有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
props 使用
Demo.js ：
import React from 'react'function Demo (props) {return (<div><h1>name: {props.name}</h1><h1>message: {props.message}</h1><h1>phone: {props.phone}</h1></div>)
}export default Demo
在 App.js 中引入组件：
import './assets/css/App.css';
import Demo from './components/Demo'function App () {return (<div className="App"><Demo name='index' message='哈哈哈' phone="12312" /></div>);
}export default App;
页面效果：
默认 Props
可以通过组件类的 defaultProps 属性为 props 设置默认值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body><div id="example"></div>
<script type="text/babel">
class HelloMessage extends React.Component {render() {return (<div><h1>name: {this.props.name}</h1><h1>phone: {this.props.phone}</h1><h1>message: {this.props.message}</h1></div>);}
}HelloMessage.defaultProps = {message: '我是props.message的默认值！'
};const element = <HelloMessage name='index' phone='12312'/>;ReactDOM.render(element,document.getElementById('example')
);
</script></body>
</html>
页面效果：
组合使用 State 和 Props
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body><div id="example"></div>
<script type="text/babel">class Demo extends React.Component {constructor() {super();this.state = {name: "xiaoming",msg: "https://www.baidu.com"}}render() {return (<div><Name name={this.state.name} /><Link site={this.state.msg} /></div>);}
}class Name extends React.Component {render() {return (<h1>{this.props.name}</h1>);}
}class Link extends React.Component {render() {return (<a href={this.props.site}>{this.props.site}</a>);}
}ReactDOM.render(<Demo />,document.getElementById('example')
);
</script></body>
</html>
页面效果：
上面实例，在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 设置 name 和 site 来获取父组件传递过来的数据。
Props 验证
Props 验证使用 propTypes，可以保证应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
类型验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body><div id="example"></div>
<script type="text/babel">
var title = "this is a title";
class Demo extends React.Component {render() {return (<h1>Hello, {this.props.title}</h1>);}
}Demo.propTypes = {title: PropTypes.string
};
ReactDOM.render(<Demo title={title} />,document.getElementById('example')
);
</script></body>
</html>
以上实例创建一个 Demo 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串。
页面效果：
当修改 title 的值为其他类型时，如下：
var title = true
运行代码会抛出错误：
是否为空验证
任意类型加上
isRequired来使prop不可空。
将 <Demo title={title} /> 修改为 <Demo />，
然后，修改校验 Demo.propTypes = { title: PropTypes.string } 为如下：
Demo.propTypes = {title: PropTypes.string.isRequired
};
运行代码会抛出错误：
相关文章：
React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。 所以，有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 props 使用 Demo.js ： import React from reactfunct…...
【Hello Network】协议
作者：小萌新 专栏：网络 作者简介：大二学生 希望能和大家一起进步 本篇博客简介：简单介绍下协议并且设计一个简单的网络服务器 协议 协议的概念结构化数据传输序列化和反序列化网络版计算机服务端代码协议定制客户端代码服务线程执…...
零项目零科研，本科排名倒数，一战上岸上海交大电子与通信工程
笔者来自通信考研小马哥23上交819全程班学员 本科就读于哈工大（威海），本科成绩很差，专业排名62/99，没有科研，没有实验室，没有项目，连最基本大家都会参加的科技立项我四年也没有参与…...
NOIP模拟赛 T3区间
题目大意 有 n n n个数字，第 i i i个数字为 a i a_i ai。有 m m m次询问，每次给出 k i k_i ki个区间，每个区间表示第 l i , j l_{i,j} li,j到第 r i , j r_{i,j} ri,j个数字，求这些区间中一共出现了多少种不同的数字。部…...
【Python】如何用pyth做游戏脚本（太简单了吧）
文章目录 前言一、开发前景二、开发流程3.1、获取窗口句柄，把窗口置顶3. 2、截取游戏界面，分割图标，图片比较 二、程序核心-图标连接算法（路径寻找）四、开发总结五、源码总结 前言 简述：本文将以4399小游戏…...
【Linux】磁盘与文件系统
目录 一、磁盘的物理结构 二、磁盘逻辑抽象 三、文件系统 1、Super Block 2、Group Descriptor Table 3、inode Table 4、Data Blocks 5、inode Bitmap 6、Block Bitmap 四、Linux下文件系统 1、inode与文件名 2、文件的增删查改 2.1、查看文件内容 2.2、删除文件…...
Transformer中的注意力机制及代码
文章目录 1、简介2、原理2.1 什么是注意力机制2.2 注意力机制在NLP中解决了什么问题2.3 注意力机制公式解读2.4 注意力机制计算过程 3、单头注意力机制与多头注意力机制4、代码4.1 代码14.2 代码2 1、简介 最近在学习transformer，首先学习了多头注意力机制…...
ChatGPT在连续追问下对多线程和双重检查锁模式的理解--已经超越中级程序员
一、问： private static final Map<Method, GZHttpClientResultModel> CACHE_RESULT_MODEL new ConcurrentHashMap<>();public void abc(Method method){cacheResultMode(method);GZHttpClientResultModel model CACHE_RESULT_MODEL.get(method);}pr…...
每天一道大厂SQL题【Day22】华泰证券真题实战(四)
每天一道大厂SQL题【Day22】华泰证券真题实战(四) 大家好，我是Maynor。相信大家和我一样，都有一个大厂梦，作为一名资深大数据选手，深知SQL重要性，接下来我准备用100天时间，基于大数据岗面试中的经典SQL题&…...
【智能电网】智能电网中针对DOS和FDIA的弹性分布式EMA（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
IDEA 创建微服务项目实例
🎈 作者：Linux猿 🎈 简介：CSDN博客专家🏆，华为云享专家🏆，Linux、C/C++、云计算、物联网、面试、刷题、算法尽管咨询我，关注我，有问题私聊！ 🎈 关注专栏：C/C++面试通关【精讲】 优质好文持续更新中……🚀🚀🚀 🎈 欢迎小伙伴们点赞👍、收藏⭐、留…...
注册苹果开发者账号的方法
在2020年以前，注册苹果开发者账号后，就可以生成证书。 但2020年后，因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号，所以需要缴费才能创建ios证书了。 所以新政策出来后，注册苹果开发者账号&#…...
OpenCV2 计算机视觉应用编程秘籍：1~5
原文：OpenCV2 Computer Vision Application Programming Cookbook 协议：CC BY-NC-SA 4.0 译者：飞龙 本文来自【ApacheCN 计算机视觉 译文集】，采用译后编辑（MTPE）流程来尽可能提升效率。 当别人说你没有底线…...
Domino自带的JSON校验工具
大家好，才是真的好。 JSON数据在Notes/Domino已经变得非常重要。从Domino 10开始，在LotusScript语言中就加入了对JSON数据处理功能。在管理中，我们知道，从Domino 12版本开始就支持Domino自动化配置，也是使用JSON数据作…...
CentOS(linux)使用Docker安装nacos
1. 拉取nacos镜像 docker pull nacos/nacos-server:2.0.3 2. 创建所需文件夹(以安装在home目录下为例) 1) 创建conf文件夹 mkdir -p /home/nacos/conf a. 新增文件application.properties(或者不增加该文件,会使用默认的) 文件内容如下: # spring server.servlet.contextP…...
无线测温在线监测系统工作原理与产品选型
摘要：本文首先介绍了无线测温在线监测系统的基本工作原理以及软硬件组成，重点介绍了在线监测的无线测温技术特点。在此研究基础上，探讨了无线测温在线监测系统在实际工作场景中的应用案例，证明了其在温度检测方面的重要应用价值。…...
Nginx rewrite ——重写跳转
Nginx常见模块 http http块是Nginx服务器配置中的重要部分，代理、缓存和日志定义等绝大多数的功能和第三方模块的配置都可以放在这模块中。作用包括：文件引入、MIME-Type定义、日志自定义、是否使用sendfile传输文件、连接超时时间、单连接请求数上限等…...
【华为OD机试真题 C++】1038 - 全量和已占用字符集 | 机试题+算法思路+考点+代码解析
文章目录 一、题目🔸题目描述🔸输入输出🔸样例1二、代码参考作者：KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页： KJ.JK 💖系列专栏：华为OD机试真题(C++) 一、题目 🔸题目描述 所谓水仙花数，是指一个n位的正整数…...
网络中的网关和物联网的网关区别 局域网 路由器 交换机 服务器
网关：是个概念。连接两种不同的网络。例如局域网要与外部通信，需要经过网关。 设备和设备之间的通信，转换协议需要网关 路由器里有功能是对网关这个概念的实现。 所以网关它可以是路由器，交换机或者是PC。 路由器有网关功能&a…...
2023 年嵌入式世界的3 大趋势分析
目录 大家好，本文讲解了嵌入式发展的3个大趋势，分享给大家。 趋势#1 – Visual Studio Code Integration 趋势#2 –支持“现代”软件流程 趋势 #3 – 在设计中利用 AI 和 ML 结论 大家好，本文讲解了嵌入式发展的3个大趋势，分享…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...