React Ts组件封装 父子传值 实际运用

已于 2023-03-16 13:16:38 修改
阅读量838 收藏 1
点赞数 1
文章标签： javascript react.js 前端
于 2022-08-12 17:57:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63494932/article/details/126308829
版权

直接上图  一目了然 

一. 父传子  直接用属性

图中的modules为父组件要传给子组件的数据  子组件是我封装的一个通用组件 里面的data为接受父组件传过来的数据的props    子组件接受完之后就可以直接拿来使用了

 

二. 子传父    需要一个回调函数

其实说白了就是：
1.在子组件自定义一个事件(changeTab)  
2.在父组件中需要定义方法(changeSubdomainA )接受自定义事件(changeTab)，然后把这个方法当成一个参数传给子组件  如此即可 
相当于是点击的时候子组件通知父组件执行他对应的方法

如图中父组件中的方法 changeSubdomainA   当子组件点击的时候 就会触发这个方法

  

 

子传父这些图中也有父传子操作 tabs标签页比较简单 也许看起来比较好懂  

interface

 1. 封装组件的时候  interface可以定义在组件内部

        

 2. 也可以定义在api文件下

        

         

Leslie21.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React父子组件间的传值的方法
10-17
在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了React父子组件间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react+ts 实现类组件 父子组件传值
Benz_s600的博客
07-25 2172
react+ts中如何实现父子传值,父组件调用子组件方法
react hooks组件间的传值方式(使用ts),子孙传值给祖先组件
AllenMa的博客
01-16 2415
这边我给Context一个空对象，（给空数组不行），然后把要传的值和修改值的函数写成一个数组，都作为values传给子孙组件。其实理解为把const [tableList, setTableList] = useState() 都给子组件，让子组件也可以去修改tablelist。完成的需求：根组件有tablelist，孙子组件要去修改tablelist并且根组件同步更新。当然我是返回了数组，因为前面父组件我给了id一个any，会比较方便。祖先组件传值给孙子组件也很简单，也参考上面这篇文章。
react+ts 父子组件传值(类组件、函数组件)
Benz_s600的博客
07-27 1805
react+ts 父子组件传值(类组件 函数组件)
【React+AntD+Ts】父子组件通信
m0_46234046的博客
10-29 305
2.父组件和子组件在项目里是不同的文件，且子组件是被抽离出来供多个组件使用的。子组件是一个Modal，Modal里是一个包含多个文字列和一个图片列内容的Table，而且该Table第一列有选择器，可以选择某一行内容。2.子组件选择某行内容且点击确认按钮后关闭子组件Modal并把子组件选择的内容传回给父组件展示。要求：1. 父组件有一个Button，点击可以打开子组件Modal。3. 父组件渲染子组件Modal传回来的Table中的图片和文字。状态来存储子组件选择的数据，并根据需要进行展示。
React ts父子组件通信
m0_58293192的博客
03-23 246
React ts父子组件通信
React 子组件向父组件传值的方法
08-29
React 子组件向父组件传值的方法 React 中，子组件向父组件传值是一种常见的需求，例如在表单提交时，子组件需要将输入的数据传递给父组件，以便父组件可以对数据进行处理和展示。那么，如何实现 React 子组件向父...
React传值 组件传值 之间的关系详解
10-16
主要介绍了React传值 组件传值 之间的关系详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
react父子组件传值
qq_47824967的博客
08-26 802
父传子–通过props接收，不能修改props的值，props可以设置默认值函数组件直接在传参时写默认值，类组件在组件内定义static defaultProps设置props默认值。父组件传递子孙组价–prop层层传递或者使用context-若组件不在一个文件内需把context提到一个js文件中，需要时引入。兄弟传值–通过父组件传递–SonF传递数据给Father再由Father传递给SonC。兄弟传值–使用events进行传递，emit进行传值，on进行接收。...
React 如何实现子传父
LiYangCSDN的博客
10-03 1317
在父组件中，定义一个回调函数 handleChildData 来处理子组件传递过来的数据，并将该回调函数传递给子组件的 onChildData 属性。在子组件中，通过调用 onChildData 函数将数据传递给父组件。在 React 中，子组件向父组件传递数据通常通过回调函数的方式实现。需要注意的是，根据你的具体需求，你可以根据数据类型对回调函数进行类型定义。在父组件中定义一个用于接收子组件数据的回调函数。在子组件中，通过调用父组件传递的回调函数将数据传递给父组件。
VUE3 TS 父子组件通信
Royzilong的博客
03-23 5730
一、父传子，传递简单字符串 父组件 传递 简单的字符串 title 给子组件 <template> <div class="layout"> <Menu title="title传给子组件Menu的数据" /> <div class="layout-right"> <Header /> <Content /> </div> </div> </t
ts中父子传值和watch监听
MISS_zhang_0110的博客
10-27 1520
ts中父子传值和watch监听一、父传子1.父组件2.子组件二、子传父1.子组件2.父组件三、watch监听 一、父传子 1.父组件 <Partent :selectValue="selectValue"></Partent> 2.子组件 import { Component, Prop } from 'vue-property-decorator'; @Prop() readonly authData!: AuthData; //只读属性 @Prop({ default:
VUE3+TS（父子、兄弟组件通信）
热门推荐
Johnson_7的博客
07-21 1万+
VUE3+TS（父子、兄弟组件通信）
react+ts父子组件传值
最新发布
qq_48434912的博客
12-21 1119
⑥并在子组件中实现点击事件调通过父组件传过来的事件传递参数。，如果只有一个参数也可以直接卸载函数的参数括号中。，如果只有一个参数也可以直接卸载函数的参数括号中。①在父组件中定义事件名称并赋予点击事件。另外如果想不点击直接发送参数的话可以在。③在子组件中定义属性的类型。④如果数据多需要解构再使用。④如果数据多需要解构再使用。⑤在子组件中定义点击事件并。②在父组件中实现点击事件。③在子组件中定义事件类型。②从父组件传递给子组件。
react ts版 组件封装总结
Zeng_Z_H的博客
02-23 940
/* 学习目标：组件封装总结 步骤： 1. 一般组件要支持style与className，👍方便组件自定义样式 2. 考虑联合字面量+字符串，提供代码提示 3. 复用React或第三方的类型，快速获得代码提示 4. 🔔自己写代码的技巧：TSX中封装组件，一般需要先定义props类型，后使用。类似vue中的props 组件封装要考虑的（三种）四种状态 */ ...
Vue3 父子组件传值 ts
weixin_62364503的博客
09-16 5652
Vue3 父子组件传值 ts ，defineProps ，defineEmits
react ts 组件之间的传值【函数式组件】
qq_45747074的博客
09-06 669
【代码】react ts 组件之间的传值【函数式组件】
vue3+ts+vite 动态导入多文件组件
公主范i 的博客
08-10 1424
1、在components文件夹中新建index.ts文件（components文件夹下为创建的组件）2、在vue文件中引入组件。
React中使用TS完成父组件调用子组件
qq_51130780的博客
07-11 752
基于TS完成父组件调用子组件方法。
react 父子组件传值
09-06
在React中，父组件向子组件传值可以通过props来实现。父组件可以将需要传递的数据作为属性传递给子组件，子组件通过props来接收这些数据。下面是几种常见的父子组件传值的方式： 1. 父组件通过props传递数据给子组件： 父组件定义一个属性，并将需要传递的数据作为该属性的值，然后将子组件引入到父组件中，并将该属性作为子组件的一个属性传递进去。子组件可以通过props来接收并使用这个数据。例如，父组件中定义属性`txt0`，并将它传递给子组件`Child`： ```javascript <Child txt={this.state.txt0} /> ``` 子组件可以通过props来接收并使用父组件传递的数据： ```javascript this.props.txt ``` 2. 父组件通过回调函数传递数据给子组件： 父组件定义一个回调函数，并将该函数作为属性传递给子组件。子组件可以通过调用这个回调函数，将需要传递的数据作为参数传递给父组件。例如，父组件中定义一个回调函数`getDatas`： ```javascript getDatas(msg){ this.setState({ mess: msg }); } ``` 然后将该函数作为属性传递给子组件`Son`： ```javascript <Son getdata={this.getDatas.bind(this)}></Son> ``` 子组件可以通过调用父组件传递的回调函数，并将需要传递的数据作为参数传递给它： ```javascript this.props.getdata(data); ``` 3. 父组件通过context传递数据给子组件： Context是React提供的一种跨组件传递数据的机制。父组件可以通过定义一个Context，并将需要传递的数据放在Context中，然后子组件可以通过访问Context来获取这些数据。具体的实现可以参考React官方文档中关于Context的介绍。 以上是React中父子组件传值的几种常见方式，你可以根据具体的需求选择合适的方式来实现父子组件之间的数据传递。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React父子组件间的传值的方法](https://download.csdn.net/download/weixin_38595850/13633672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [React教程：父子组件传值（组件通信）](https://blog.csdn.net/p445098355/article/details/104519363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [React父子组件传值](https://blog.csdn.net/weixin_45817109/article/details/103628428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值