react(子传父、父传子)

news2025/1/15 20:56:27

目录

1. 父传子 数组/对象 的两种写法

2. 子传父:

3. 生成唯一id的库:

4. 对接收的组件进行验证


 

1. 父传子 数组/对象 的两种写法

function App() {
  const obj = [{age:19},{age:19}]
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Header obj1 = {obj}/>
      </header>
    </div>
  );
}

第一种: <Header obj1 = {obj}/>  

第二种: <Header {...obj}/>

2. 子传父:

子组件中: this.props.父子间传递给子组件的函数(需要传递的值)

父组件:利用porps传递一个函数: <Header 父子间传递给子组件的函数 = {this.fuc}/>  

最后父组件在fuc函数中利用形参接收子组件传过来的值

3. 生成唯一id的库:

uuid  安装: yarn add uuid

nanoid   较小,安装: yarn add nanoid

使用分别暴露的形式引用: import {nanoid} from 'nanoid'

具体使用: nanoid()

问: react如何动态的添加样式(ww)

4. 对接收的组件进行验证

porp-types

5. 状态在哪里,操作状态的方法就在那里;状态中的数据某一些组件使用,放在共同的父组件中(状态提升);差分组件注意 className 和 style 的写法

6. 脚手架配置代理--方法

解决跨域问题:

1. 在package.json 中配置:  ”proxy“ : "http://localxxxxx:3000"

2.  解决跨域、请求多个服务器的问题

 

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

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

相关文章

Jmeter常用参数化技巧总结

说起接口测试&#xff0c;相信大家在工作中用的最多的还是Jmeter。 JMeter是一个100&#xff05;的纯Java桌面应用&#xff0c;由Apache组织的开放源代码项目&#xff0c;它是功能和性能测试的工具。具有高可扩展性、支持Web(HTTP/HTTPS)、SOAP、FTP、JAVA 等多种协议。 在做…

uniapp之使用map组件显示接收过来的经纬度

目录 前言 效果图 提示 总代码 分析 1.显示自己位置的属性 2.markers 点标记 前言 由于项目的需求&#xff0c;我需要从主页面接收经纬度&#xff0c;并渲染至地图上面&#xff0c;同时呢&#xff0c;也要在该位置上显示图标标记点&#xff08;红色&#xff09;&#x…

兴业数金 测试 面试真题|面经

兴业数金测试服务中心技术面&#xff08; 一面二面&#xff09; 时间线流程 8.12一面&#xff08;30min&#xff09;->8.31邮件通知二面&#xff0c;填写职位申请表->9.2二面&#xff08;25min&#xff0c;二面需要用小鱼易连&#xff0c;需提前下载和注册&#xff09; …

儿童台灯怎么选对眼睛最好?2022年的现在如何挑选儿童台灯呢

儿童台灯选择首要考虑因素就是护眼&#xff0c;而是否护眼&#xff0c;可以从以下几个角度去看。 一、照度。根据国家标准划分&#xff0c;照度可分为国A和国AA两级&#xff0c;它们可以衡量光线明亮程度和均匀程度&#xff0c;儿童台灯选择国AA级对眼睛最好。 二、显色指数。…

Java#19(面向对象三大特征之一:多态)

目录 一.多态 二.多态中调用成员的特点 三.instanceof关键字 一.多态 多态:同类型的对象,表现出的不同形态 格式:父类类型 对象名称 子类对象; 前提: (1)有继承关系 (2)有父类引用指向子类对象 (3)有方法重构 优点: (1)使用父类作为参数,可以接收所有子类对象 (2)体现多态的…

科技金融企业助力乡村振兴,能有多大新意?

最近几年&#xff0c;越来越多科技互联网企业开始承担起他们的社会责任&#xff0c;成为乡村振兴领域一股不可忽视的力量。作为电商平台&#xff0c;阿里、拼多多、京东助力农产品上行&#xff0c;解决农产品的销售难题&#xff0c;直接为乡村振兴领域做出大贡献&#xff0c;但…

罗丹明PEG活性酯 RB-PEG-NHS,罗丹明聚乙二醇活性酯,Rhodamine-PEG-NHS

产品名称 罗丹明聚乙二醇活性酯 RB-PEG-NHS 中文名称 罗丹明PEG活性酯 活性酯PEG罗丹明 活性酯聚乙二醇罗丹明 英文名称 RB-PEG-NHS RB-PEG-SC Rhodamine-PEG-NHS 分子量 400 600 1000 2000 3400 5000 10000 结构式&#xff1a; CAS N/A 溶解度 溶于DMSO,DMF,DCM&#xff…

Linux进阶-编译工具链

gcc编译器&#xff08;预处理、编译&#xff09; binutils工具集&#xff08;汇编、链接&#xff09; 本地编译&#xff1a;编译工具链和目标程序运行在相同的架构平台。 交叉编译&#xff1a;编译工具链和目标程序运行在不同的架构平台。 ARM-GCC是GCC编译工具链的一个分支…

Spring Data JPA审计

Spring Data JPA为跟踪持久性层的变化提供了很好的支持。通过使用审核&#xff0c;我们可以存储或记录有关实体更改的信息&#xff0c;例如谁创建或更改了实体以及何时进行更改。 我们可以利用实体字段上的CreatedBy,CreatedDate,LastModifiedDate,LastModifiedBy注释来指示 S…

PointNet 和 PointNet++ 作者讲座学习笔记

文章目录前人的工作三维数据的表达形式把点云转化为体素&#xff0c;再用3D CNNPointNet两个挑战置换不变性旋转不变性PointNet的分类网络PointNet的分割网络PointNet的限制PointNet多级点云特征学习分类分割小区域大小参考资料前人的工作 三维数据的表达形式 点云&#xff1…

Adaptive AUTOSAR Technology Sharing

文章目录一、目录二、未来汽车基础设施需求三、整车架构四、CP vs AP五、AP架构1.Execution Management与State Management的关系2.Service-oriented communication2.Diagnostic Management3.Persistency4.Log and Trace5.安全支持6.安全方法7.信息安全8. AutoSar&#xff1a;T…

Selenium4之CDP

相较于以前的版本&#xff0c;Selenium4除了推出了relative Locators&#xff0c;还有一个比较重要的更新就是对于Chrome Dev Tools Protocol的支持。 Chrome Dev Tools Protocol帮助用户监测、检查、调试和模版化Chrome浏览器以及基于Chromium的其它浏览器&#xff08;比如EDG…

Spring Boot 2.x系列【27】应用篇之代码混淆

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Spring Boot版本2.7.0 文章目录概述代码混淆ProGuard使用Maven 插件直接使用工具混淆概述 代码混淆 代码混淆(Obfuscated code)亦称花指令&#xff0c;是将计算机程序的代码&#xff0c;转换成…

创建.NET MAUI程序

.NET MAUI&#xff0c;先说说读音&#xff0c;Maui&#xff0c;英 [ˈmaui]&#xff0c; 美 [ˈmaʊi]&#xff0c;直接读&#xff1a;毛伊&#xff0c;或者读大写字母MAUI。 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和…

混合云和多云:差异和相似之处

一般来说&#xff0c;云计算是服务器的集合&#xff0c;您可以通过 Internet 访问其资源。要访问云服务/资源&#xff0c;您需要一个云服务提供商根据您的业务需求为您提供服务。混合云和多云是两种比较流行的云计算类型&#xff0c;下文主要对两者的差异和相似之处作出详解&am…

CD147单克隆抗体通过酰胺反应偶联到Dox-CMCh-BAPE聚合物胶束/CBZ-AAN-Dox的制备

小编在这里给大家分享了CD147单克隆抗体通过酰胺反应偶联到Dox-CMCh-BAPE聚合物胶束/CBZ-AAN-Dox的制备&#xff0c;和小编一起来看&#xff01; 瑞禧分享-CBZ-AAN-Dox的研究&#xff1a; 通过计算机辅助药物设计和化学合成&#xff0c;我们获得并研究了前药N-苄氧基羰基Ala-…

力扣 146. LRU 缓存

题目 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则返…

基于PHP+MySQL二手书交易系统

随着时代的变迁和人们的对知识的汲取,人们需要不断的购买一些新的图书来进行学习,但是这些图书在使用过一点时间之后其价值也会在拥有者手中变的没有那么高了,但是对于没有阅读和使用过这本书的人来说其还是具有更好的价值的,如果直接购买新书价格比较昂贵,对于拥有者来说如果将…

6个好用到爆的音频、配乐素材网站,BGM都在这里了

现在只要有一部手机&#xff0c;人人都能成为视频创作者。一个好的视频不能缺少的就是内容、配乐&#xff0c;越来越注重版权的当下&#xff0c;音效素材使用不当造成侵权的案例层出不穷。为了避免侵权&#xff0c;找素材让很多创作者很头疼。 今天我就整理了6个可以免费下载&a…

Hibernate多表的关联插入

一、一对多关系&#xff1a; “一”的一方为主表&#xff0c;“多”的一方为副表&#xff0c;主表关联副表&#xff0c;应该在主表中加入副表对象作为属性。 根据顾客ID查询顾客信息 &#xff08;一&#xff09; &#xff0c;同时将顾客名下所有订单查出 &#xff08;多&#…