react学习-组件传值

1.props传值
主要步骤:
在父组件中引用子组件时,在子组件上面写入name1={name2}格式进行传值,name1为子组件中对应的用于接收数据的字段名称,name2为父组件中需要传递到子组件中的值(state中声明的数据);要在子组件中调用父组件的方法修改父组件的值可以用同样的方法将函数传入到子组件。相关代码如下:
父组件:parent.js

import React, { Component } from "react";
import Son from "./son";export class parent extends Component {state = {name: "前端大佬",msg: "哈哈哈",};//   如果要用子组件改父组件的值就触发该方法parentChange = (data) => {this.setState({ msg: data });};render() {let { name, msg } = this.state;return (<div><h1>parent page</h1><p>姓名:{name}</p><p>信息:{msg}</p><Son name={name} msg={msg} parentChange={this.parentChange} />{/* {...this.state}传递state中的所有值 */}{/* <Son {...this.state} parentChange={this.parentChange} /> */}</div>);}
}export default parent;

子组件:son.js

import React, { Component } from "react";
import PropTypes from "prop-types";export class son extends Component {//   state = {//     name: "前端新手",//     msg: "略略略",//   };constructor(props) {super();this.state = {name: "前端新手",msg: "略略略",//   parentMsg: props.msg,};}handleChange = (e) => {// this.setState({ parentMsg: e.target.value });this.props.parentChange(e.target.value);};render() {let { name, msg, parentMsg } = this.state;let { name: pName, msg: pMsg } = this.props;// 父子组件中用到同样的属性名称的时候一般用别名区分return (<div><h1>son page</h1><p>姓名:{name}</p><p>信息:{msg}</p><p>资深前端介绍信息:{pName}--{pMsg}</p><input type="text" defaultValue={pMsg} onChange={this.handleChange} /></div>);}
}// 使用props校验
son.propTypes = {name: PropTypes.string,msg: PropTypes.string.isRequired,
};
// 未传递值时会显示以下默认值
son.defaultProps = {name: "1",msg: "2",
};export default son;

2.context传值
主要步骤:
先创建一个context对象,并导出;
在使用的组件中导入该对象;
使用<MainContext.Provider>包裹组件元素;
在组件内部通过声明static contextType = MainContext或者组件.contextType = MainContext或者使用<MainContext.Consumer>包裹组件元素利用函数调用的方式来使用。相关代码如下:
context.js

import React from "react";
// 创建一个context对象,组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值
const MainContext = React.createContext({ name: "哈哈" }); // 默认值export default MainContext;

hello.js

import React, { Component } from "react";
import MainContext from "./context";
import World from "./word";export class hello extends Component {// static contextType = MainContext;render() {return (<div>这是hello组件,是父组件{this.context.name}<World /></div>);}
}// 用Class.contextType挂载在class上,然后使用this.context来消费最近Context上的那个值
// 可以在任何生命周期中访问到它,包括render函数中。(多用于类组件)
hello.contextType = MainContext;export default hello;

word.js

import React, { Component } from "react";
import MainContext from "./context";export class word extends Component {render() {return (<div><MainContext.Consumer>{(context) => {console.log(context);return <div>这是word组件,是孙组件-{context.name}</div>;}}</MainContext.Consumer></div>);}
}export default word;

main.js

import React, { Component } from "react";
import Hello from "./hello";
import MainContext from "./context";export class main extends Component {render() {let obj = { name: "ernest" };return (<div><MainContext.Provider value={obj}>main组件<Hello /></MainContext.Provider>{/* 不使用MainContext.Provider时context中的默认值才会生效 */}</div>);}
}export default main;

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

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

相关文章

一篇文章带你搞懂C++引用(建议收藏)

引用 6.1 引用概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用同一块内存空间。 比如&#xff1a;李逵&#xff0c;在家称为"铁牛"&#xff0c;江湖上人称&quo…

Linux.软件操作

1.yum 命令 要连网 2.systemctl 命令控制软件的启动和关闭 3.ln 创建软连接 使用cat来找本体&#xff0c;看看链接生不生效 4.date 命令查看系统时间 格式化的时候可以用双引号把他们引出来 -d 对时间进行修改 修改时区 自动校准 手动校准 5.ifconfig 查看本机的ip地址 6.h…

mysql undolog管理

在MySQL中&#xff0c;Undo Log&#xff08;撤销日志&#xff09;用于支持事务的回滚和MVCC&#xff08;多版本并发控制&#xff09;。为了避免Undo Log不断增长&#xff0c;影响系统性能&#xff0c;需要进行合理的清理。MySQL的Undo Log清理策略主要依赖于系统的配置参数和后…

Ansible——get_url模块

目录 主要用途 参数总结 基本语法示例 使用示例 示例1&#xff1a;下载文件 示例2&#xff1a;使用校验和验证文件 示例3&#xff1a;使用 HTTP 基本认证 示例4&#xff1a;通过代理服务器下载文件 示例5&#xff1a;设置文件权限、所有者和组 示例6&#xff1a;强制…

5.31.15 使用图像到图像转换和 YOLO 技术对先前的乳房 X 光检查结果中的异常进行早期检测和分类

在本研究中&#xff0c;我们研究了基于 You-Only-Look-Once (YOLO) 架构的端到端融合模型的有效性&#xff0c;该模型可同时检测和分类数字乳房 X 光检查中的可疑乳腺病变。包括四类病例&#xff1a;肿块、钙化、结构扭曲和正常&#xff0c;这些病例来自包含 413 个病例的私人数…

ic基础|复位篇02:芯片中的“人生重来枪”!crg之复位系统

大家好&#xff0c;我是数字小熊饼干&#xff0c;一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结&#xff0c;并通过汇总成文章的形式进行输出&#xff0c;相信无论你是在职的还是…

范闲获取到庆帝与神庙的往来信件,用AES进行破解

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在《庆余年2》中&#xff0c;范闲与庆帝和神庙之间的权谋斗争愈演愈烈。一次偶然的机会&#xff0c;范闲从庆帝的密室中获取到几封与神庙往来的密信。然而&#xff0c;这封信件…

eclipse连接后端mysql数据库并且查询

教学视频&#xff1a;https://www.bilibili.com/video/BV1mK4y157kE/?spm_id_from333.337.search-card.all.click&vd_source26e80390f500a7ceea611e29c7bcea38本人eclipse和up主不同的地方如下&#xff0c;右键项目名称->build path->configure build path->Libr…

【悬架笔记三】1/4被动悬架垂向动力学仿真+频域特性分析

1/4被动悬架 代码&#xff1a; %书第156页、159页 clc clear close all %% 一.悬架参数 ms320; mw50; Ks22000; Cs1500; Kw195000; f00.07; %% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %% 二.垂向振动动力学仿真 %% 二.1.状态方程 A [0 1 0 -1;.…

机器人--矩阵运算

两个矩阵相乘的含义 P点在坐标系B中的坐标系PB&#xff0c;需要乘以B到A到变换矩阵TAB。 M点在B坐标系中的位姿MB&#xff0c;怎么计算M在A中的坐标系&#xff1f; 一个矩阵*另一个矩阵的逆矩阵

JavaSE 实战五子棋中国象棋(单机简易版)

介绍 JavaSE实践五子棋和中国象棋游戏&#xff0c;棋盘&#xff0c;棋子绘制&#xff0c;输赢判定重置棋盘&#xff0c;单机博弈。 五子棋棋盘 中国象棋棋盘 使用说明 启动类 Main.java&#xff0c; 面板类 Panel.java绘制棋盘和玩法&#xff0c;实体类 ChessPiecesNode.jav…

适配器模式 Adapter

一种结构型设计模式&#xff0c;它允许将不兼容的对象转换成可兼容的接口。主要目的是解决在不改变现有代码的情况下&#xff0c;使不兼容的接口之间能够正常工作&#xff0c;通过创建一个中间转换的适配器来将一个对象转换成我们所需要的接口。 场景&#xff1a; 当你原来的某…

【Text2SQL 论文】MAC-SQL:多个 Agents 合作来解决 Text2SQL

论文&#xff1a;MAC-SQL: A Multi-Agent Collaborative Framework for Text-to-SQL ⭐⭐⭐⭐ arXiv:2312.11242, 北航 & Tencent Code: MAC-SQL | GitHub 文章目录 一、论文速读二、MAC-SQL2.1 Selector agent2.2 Decomposer agent2.3 Refiner agent 三、指令微调的 SQL-L…

2024.06.07【读书笔记】丨生物信息学与功能基因组学(第十一章 分子水平的系统发生和进化 第四部分)【AI测试版】

读书笔记四&#xff1a;《生物信息学与功能基因组学》第十一章第四部分 分子系统发生的专用名词与树的拓扑结构 在《生物信息学与功能基因组学》第十一章的第四部分&#xff0c;作者介绍了分子系统发生分析中的专用名词&#xff0c;并详细解释了系统发生树的拓扑结构和分支长…

【Python Cookbook】S02E04 文本模式的匹配和查找 match()、search()、findall() 以及 捕获组和 + 的含义

目录 问题解决方案讨论 问题 本文讨论一些按照特定的文本模式进行的查找和匹配。 解决方案 如果想要匹配的只是简单文字&#xff0c;通常我们使用一些内置的基本字符串方法即可&#xff0c;如&#xff1a;str.find()&#xff0c;str.startwith()&#xff0c;str.endswith() …

Day49 动态规划part08

LC139单词拆分(未掌握) 未掌握分析&#xff1a;将字符串s中的各个字符看成是背包&#xff0c;思考成了多重背包问题单词就是物品&#xff0c;字符串s就是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。拆分时可以重复使用字典中的单词&#xf…

转速传感器介绍

一、概述 RPM&#xff08;Revolutions Per Minute&#xff09;转速传感器是一种用于测量旋转机械设备转速的传感器。它可以检测旋转部件上的特定位置标记&#xff08;如齿轮、凸起或磁铁&#xff09;&#xff0c;并根据这些标记的通过频率来计算转速。发电额定频率是50hz和60z…

ubuntu18.04环境下,arduino ide在打开串口监视器时报错

ubuntu18.04环境下&#xff0c;arduino ide在打开串口监视器时报错 Exception in thread “AWT-EventQueue-0” java.lang.UnsatisfiedLinkError: /home/lzx/.jssc/linux/libjSSC-2.8_x86_64.so: /home/lzx/.jssc/linux/libjSSC-2.8_x86_64.so: file too short 这个错误表明 li…

力扣1574.删除最短的子数组使剩余数组有序

力扣1574.删除最短的子数组使剩余数组有序 剩下有序 –> 前面一段 后面一段 有序 前面有序 后面有序 前面最后一项 < 后面第一项先反向遍历找到right的最小值然后正向遍历找left的最大值当nums[left] > nums[right]时 right class Solution {public:int findLen…

java线程变量共享

在Java中&#xff0c;线程变量共享可以通过几种方式实现&#xff1a; 1.实例变量&#xff1a;如果一个实例变量被多个线程共享&#xff0c;你需要确保适当的同步&#xff0c;以避免竞态条件。你可以使用synchronized关键字或者Lock接口来保护共享变量。 2.静态变量&#xff1a;…