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

React Props

news 2025/9/18 13:27:26

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

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...

编程新知 2025/9/9 14:59:47

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/8 9:55:21

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...

编程新知 2025/9/13 17:38:35

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/9/2 17:48:09

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...

编程新知 2025/9/6 0:31:52

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/1 23:34:37

探索Selenium：自动化测试的神奇钥匙

目录一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/17 22:23:49

Vue 模板语句的数据来源

🧩 Vue 模板语句的数据来源：全方位解析 Vue 模板（<template> 部分）中的表达式、指令绑定（如 v-bind, v-on）和插值（{{ }}）都在一个特定的作用域内求值。这个作用域由当前组件…...

编程新知 2025/6/16 3:14:00

[拓扑优化] 1.概述

常见的拓扑优化方法有：均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。常见的数值计算方法有：有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2025/9/13 17:31:18

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等，设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/9/18 12:50:56

props 使用

默认 Props

组合使用 State 和 Props

Props 验证

类型验证

是否为空验证

相关文章：