React三属性之:props

作用

将父组件的参数传递给子组件

父组件

import './App.css';
import React from 'react';
import PropsTest from './pages/propsTest'
class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj={{name:'王惊涛',age:27}}></PropsTest></div>)}
}export default App;//组件上的obj={{name:'王惊涛',age:27}},传递的就是props参数

子组件

import React from "react";
class PropsTest extends React.Component{render(){return(<div><h4>propsTest子组件</h4><p>名字{this.props.obj.name}</p><p>年龄{this.props.obj.age}</p></div>)}
}
export defaul

效果如下

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

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

相关文章

数据分享|R语言武汉流动人口趋势预测:灰色模型GM(1,1)、ARIMA时间序列、logistic逻辑回归模型...

全文链接&#xff1a;http://tecdat.cn/?p32496 人口流动与迁移&#xff0c;作为人类产生以来就存在的一种社会现象&#xff0c;伴随着人类文明的不断进步从未间断&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 人力资源是社会文明进步、人民富裕…

matplotlib从起点出发(8)_Tutorial_8_Legend

1 图例教程 在matplotlib中灵活地生成Legend。 本图例指南是legend()中可用文档的扩展——在继续阅读本指南之前&#xff0c;请确保你熟悉legend()文档的内容。 本指南使用了一些常用术语&#xff0c;为清楚起见&#xff0c;此处记录了这些术语&#xff1a; legend entry 图…

Python批处理(一)提取txt中数据存入excel

Python批处理&#xff08;一&#xff09;提取txt中数据存入excel 问题描述 现从冠层分析软件中保存了叶面积指数分析的结果&#xff0c;然而软件保存格式为txt&#xff0c;且在不同的文件夹中&#xff0c;每个文件夹的txt文件数量不固定&#xff0c;但是txt文件格式固定。现需…

【MySQL】基础语法总结

MySQL 基础语句 一、DDL 数据库定义语言 1.1CREATE 创建 1.1.1 创建数据库 语法结构 CREATE DATABASE database_name;示例 CREATE DATABASE demo;1.1.2 创建表 语法结构 CREATE TABLE 表名 (列1 数据类型,列2 数据类型,... );示例 CREATE TABLE new_user (id INT PRIMARY KE…

【strstr函数的介绍和模拟实现——超详细版】

strstr函数的介绍和模拟实现 strstr函数的介绍 资源来源于cplusplus网站 strstr函数声明&#xff1a; char *strstr( const char *str1, const char *str2 ); 它的作用其实就是&#xff1a; 在字符串str1中查找是否含有字符串str2&#xff0c;如果存在&#xff0c;返回str2在…

go-zero直连与etcd服务注册中心

go-zero中直连方式 在使用grpc是最重要的就是pb文件了&#xff0c;生成的pb文件&#xff0c;通过pb文件可以生成grpc的客户端和服务端&#xff0c;那么客户端和服务端就可以直连了&#xff0c;再次基础上可以引入etcd实现服务注册。 所有的代码都需要开发者编写&#xff0c;包…

7 个适合初学者的项目,可帮助您开始使用 ChatGPT

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 从自动化日常任务到预测复杂模式&#xff0c;人工智能正在重塑行业并重新定义可能性。 当我们站在这场人工智能革命中时&#xff0c;我们必须了解它的潜力并将其整合到我们的日常工作流程中。 然而。。。我知道开始使…

企业架构LNMP学习笔记21

URL重写&#xff1a; ngx_http_rewrite_module 模块用于使用PCRE正则表达式更改请求URI&#xff0c;返回重定向&#xff0c;以及有条件地选择配置。 return 该指令用于结束结束规则的执行并返回状态码给客户端。 403 Forbidden.服务器已经理解请求,但是拒绝执行它 404 Not…

音频——I2S DSP 模式(五)

I2S 基本概念飞利浦(I2S)标准模式左(MSB)对齐标准模式右(LSB)对齐标准模式DSP 模式TDM 模式 文章目录 DSP formatDSP A时序图逻辑分析仪抓包 DSP B时序图逻辑分析仪抓包 DSP format DSP/PCMmode 分为 Mode-A 和 Mode-B 共 2 种模式。不同芯⽚有的称为 PCM mode 有的称为 DSP m…

ms17-010(永恒之蓝)漏洞复现

目录 前言 一、了解渗透测试流程 二、使用nmap工具对win7进行扫描 2.1 2.2 2.3 2.4 2.5 三、尝试ms17-010漏洞利用 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 四、结果展示 4.1 4.2 4.3 4.4 4.5 总结 前言 ms17-010&#xff08;永恒之蓝&am…

说说分布式系统容器化

继上一篇浅谈高并发分布式架构演进路径&#xff0c;单体服务完成分布式架构改造&#xff0c;转型为微服务。随着微服务数量的急剧增加&#xff0c;跨应用、跨系统的调用越来越多&#xff0c;调用关系和依赖关系日益复杂&#xff0c;这种复杂性增加了系统的设计、实施和维护的难…

【精品】NLP自然语言处理学习路线(知识体系)

当前&#xff0c;大规模预训练语言模型的强大对话问答、文本生成能力&#xff0c;将自然语言处理&#xff08;NLP&#xff09;的研究和应用推向了新一轮的热潮。NLP是计算机科学、人工智能和语言学等学科交叉的前沿领域。NLP的应用和研究范围非常的广泛&#xff0c;个人是没有找…