当前位置：首页 > news >正文

React Props

news 文章来源：https://blog.csdn.net/HH18700418030/article/details/130131313 2025/5/14 11:57:47

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…...

编程日记 2023/4/24 0:00:25

【Hello Network】协议

作者：小萌新专栏：网络作者简介：大二学生希望能和大家一起进步本篇博客简介：简单介绍下协议并且设计一个简单的网络服务器协议协议的概念结构化数据传输序列化和反序列化网络版计算机服务端代码协议定制客户端代码服务线程执…...

编程日记 2023/4/23 23:55:24

零项目零科研，本科排名倒数，一战上岸上海交大电子与通信工程

笔者来自通信考研小马哥23上交819全程班学员本科就读于哈工大（威海），本科成绩很差，专业排名62/99，没有科研，没有实验室，没有项目，连最基本大家都会参加的科技立项我四年也没有参与…...

编程日记 2023/5/31 10:05:55

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个数字，求这些区间中一共出现了多少种不同的数字。部…...

编程日记 2023/6/1 11:53:30

【Python】如何用pyth做游戏脚本（太简单了吧）

文章目录前言一、开发前景二、开发流程3.1、获取窗口句柄，把窗口置顶3. 2、截取游戏界面，分割图标，图片比较二、程序核心-图标连接算法（路径寻找）四、开发总结五、源码总结前言简述：本文将以4399小游戏…...

编程日记 2023/4/23 23:40:21

【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、删除文件…...

编程日记 2023/4/23 23:35:18

Transformer中的注意力机制及代码

文章目录 1、简介2、原理2.1 什么是注意力机制2.2 注意力机制在NLP中解决了什么问题2.3 注意力机制公式解读2.4 注意力机制计算过程 3、单头注意力机制与多头注意力机制4、代码4.1 代码14.2 代码2 1、简介最近在学习transformer，首先学习了多头注意力机制&#xf…...

编程日记 2023/4/23 23:30:17

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…...

编程日记 2023/4/23 23:25:16

每天一道大厂SQL题【Day22】华泰证券真题实战(四)

每天一道大厂SQL题【Day22】华泰证券真题实战(四) 大家好，我是Maynor。相信大家和我一样，都有一个大厂梦，作为一名资深大数据选手，深知SQL重要性，接下来我准备用100天时间，基于大数据岗面试中的经典SQL题&…...

编程日记 2023/4/23 23:20:14

【智能电网】智能电网中针对DOS和FDIA的弹性分布式EMA（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/4/23 23:15:13

IDEA 创建微服务项目实例

🎈 作者：Linux猿 🎈 简介：CSDN博客专家🏆，华为云享专家🏆，Linux、C/C++、云计算、物联网、面试、刷题、算法尽管咨询我，关注我，有问题私聊！ 🎈 关注专栏：C/C++面试通关【精讲】优质好文持续更新中……🚀🚀🚀 🎈 欢迎小伙伴们点赞👍、收藏⭐、留…...

编程日记 2023/5/31 19:56:02

注册苹果开发者账号的方法

在2020年以前，注册苹果开发者账号后，就可以生成证书。但2020年后，因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号，所以需要缴费才能创建ios证书了。所以新政策出来后，注册苹果开发者账号&#…...

编程日记 2023/5/31 10:06:44

OpenCV2 计算机视觉应用编程秘籍：1~5

原文：OpenCV2 Computer Vision Application Programming Cookbook 协议：CC BY-NC-SA 4.0 译者：飞龙本文来自【ApacheCN 计算机视觉译文集】，采用译后编辑（MTPE）流程来尽可能提升效率。当别人说你没有底线…...

编程日记 2023/4/23 23:00:09

Domino自带的JSON校验工具

大家好，才是真的好。 JSON数据在Notes/Domino已经变得非常重要。从Domino 10开始，在LotusScript语言中就加入了对JSON数据处理功能。在管理中，我们知道，从Domino 12版本开始就支持Domino自动化配置，也是使用JSON数据作…...

编程日记 2023/4/23 22:55:07

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…...

编程日记 2023/4/23 22:50:05

无线测温在线监测系统工作原理与产品选型

摘要：本文首先介绍了无线测温在线监测系统的基本工作原理以及软硬件组成，重点介绍了在线监测的无线测温技术特点。在此研究基础上，探讨了无线测温在线监测系统在实际工作场景中的应用案例，证明了其在温度检测方面的重要应用价值。…...

编程日记 2023/4/23 22:45:04

Nginx rewrite ——重写跳转

Nginx常见模块 http http块是Nginx服务器配置中的重要部分，代理、缓存和日志定义等绝大多数的功能和第三方模块的配置都可以放在这模块中。作用包括：文件引入、MIME-Type定义、日志自定义、是否使用sendfile传输文件、连接超时时间、单连接请求数上限等…...

编程日记 2023/4/23 22:39:58

【华为OD机试真题 C++】1038 - 全量和已占用字符集 | 机试题+算法思路+考点+代码解析

文章目录一、题目🔸题目描述🔸输入输出🔸样例1二、代码参考作者：KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页： KJ.JK 💖系列专栏：华为OD机试真题(C++) 一、题目 🔸题目描述所谓水仙花数，是指一个n位的正整数…...

编程日记 2023/4/23 22:34:52

网络中的网关和物联网的网关区别局域网路由器交换机服务器

网关：是个概念。连接两种不同的网络。例如局域网要与外部通信，需要经过网关。设备和设备之间的通信，转换协议需要网关路由器里有功能是对网关这个概念的实现。所以网关它可以是路由器，交换机或者是PC。路由器有网关功能&a…...

编程日记 2023/4/23 22:29:51

2023 年嵌入式世界的3 大趋势分析

目录大家好，本文讲解了嵌入式发展的3个大趋势，分享给大家。趋势#1 – Visual Studio Code Integration 趋势#2 –支持“现代”软件流程趋势 #3 – 在设计中利用 AI 和 ML 结论大家好，本文讲解了嵌入式发展的3个大趋势，分享…...

编程日记 2023/4/23 22:24:50

基于 DolphinDB 机器学习的出租车行程时间预测

DolphinDB 集高性能时序数据库与全面的分析功能为一体，可用于海量结构化数据的存储、查询、分析、实时计算等，在工业物联网场景中应用广泛。本文以纽约出租车行程时间预测为例，介绍如何使用 DolphinDB 训练机器学习模型，并进行实时…...

编程日记 2023/4/23 22:19:49

Python调用最小二乘法

文章目录 numpy实现scipy封装速度对比所谓线性最小二乘法，可以理解为是解方程的延续，区别在于，当未知量远小于方程数的时候，将得到一个无解的问题。最小二乘法的实质，是保证误差最小的情况下对未知数进行赋值。最小…...

编程日记 2023/4/23 22:14:47

15.数据表格.上

本节课我们来开始了解 Layui 的内置模块：table 数据表格。一．基本使用 1. table 模块，通过异步加载数据来渲染表格来展现数据内容； <table id"table"></table> layui.use([table], () > { const table …...

编程日记 2023/4/23 22:09:45

在poetry虚拟环境下打包exe

本博客介绍了在poetry虚拟环境下打包exe的流程，包含两个部分打包的基本流程打包过程中遇到的问题打包的基本流程 copy打包工具到本地,（share:\公用共享\芯片部\乔羽\img_generate\系统部提供的打包exe工具） 用poetry搭建虚拟环境在打包…...

编程日记 2023/4/23 22:04:45

【Unity VR开发】结合VRTK4.0：高亮与标签

语录： 信仰到底是什么呢，就是纵身一跃，就是我们跟神之间一个永远的约定，是舍弃日的去开始新的生活;信仰就是从今以后，再也不要放开你的手。前言： Interactable Highlighter ：当我们的手柄触碰…...

编程日记 2023/4/23 21:59:43

有了MySQL，为什么还要有NoSQL

🏆今日学习目标： 🍀MySQL和NoSQL的区别 ✅创作者：林在闪闪发光 ⏰预计时间：30分钟 🎉个人主页：林在闪闪发光的个人主页 🍁林在闪闪发光的个人社区，欢迎你的加入: 林在闪闪…...

编程日记 2023/4/23 21:54:42

找PPT模板就上这5个网站~

分享几个可以永久免费下载PPT模板、素材的网站，上万个模板随便下载，赶紧收藏起来~ 1、菜鸟图库 https://www.sucai999.com/search/ppt/0_0_0_1.html?vNTYxMjky 网站素材非常全面，主要以设计类素材为主，办公类素材也很多&#x…...

编程日记 2023/4/23 21:49:41

Ae：摄像机选项

摄像机选项 Camera Options 快捷键：AA 摄像机选项 Camera Options与“摄像机设置”中的参数大同小异且同步变化，额外增加了一些与镜头模糊和散景光斑形状有关的摄像机属性。请参阅： 《Ae：摄像机设置》在合成设置中，选…...

编程日记 2023/5/31 11:11:41

嵌入式日志库ulog的使用和解析

嵌入式日志信息保存调试（ulog） 获取项目地址：https://github.com/rdpoor/ulog uLog 为嵌入式微控制器或任何资源有限的系统提供结构化的日志记录机制。它继承了流行的 Log4c 和 Log4j 平台背后的一些概念，但开销更低。使用方…...

编程日记 2023/4/23 21:39:38

自阿里P8爆出内部1031道java面试题后，在Boss直聘狂拿千份Offer

开始之前我问大家几个问题，看大家是如何思考的： 1.程序员一定要去一线城市漂泊吗？在自己家乡如何拿到一份满意的薪水？ 2.程序员被裁员、找不到工作，代表什么？ 3.程序员一定要进一线大厂吗？你…...

编程日记 2023/4/23 21:34:36

props 使用

默认 Props

组合使用 State 和 Props

Props 验证

类型验证

是否为空验证

相关文章：