react父子之间互相传值小demo

最新推荐文章于 2023-07-17 12:01:56 发布
最新推荐文章于 2023-07-17 12:01:56 发布
阅读量157 收藏
点赞数
分类专栏： react 文章标签： react webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42965828/article/details/115335358
版权
第一步:构建react环境:

命令一键快速搭建

$ npx create-react-app my-app || npm init react-app my-app
1.创建两个.jsx文件,并在入口index.js中引入父文件,在父文件中引入子文件

创建的两个文件
在这里插入图片描述
在index.js中引入父文件
在这里插入图片描述
在父文件中引入子文件
在这里插入图片描述

2.两个文件的内容分别为:

*** 子文件中的内容如下 ***
在这里插入图片描述
*** 父文件中的内容如下 ***
在这里插入图片描述

子传父

这里是将父文件中的parentValue变量的值传递给子文件

在这里插入图片描述

在子文件中需要使用this.props.data来接受

在这里插入图片描述
注意:为什么this.props后面是.data
因为父文件中子文件的标签的属性已经设置为data={},所以子文件中只能用data接受,当然父文件传递时使用了其他的名字来作为子文件的标签的属性,子文件就要使用相同的名字来接受,否则是接受不到相对应的数据的,而传递的数据js中的大多数类型都是支持的,我们使用最方便的还是对象和数组类型的

父传子(这里使用了点击触发事件来向父文件传递数据)

在子文件中定义了点击事件
在这里插入图片描述
并在函数中实现它,顺便在这里调用父文件传递的函数并执行,这样就可以将子文件的数据向父文件传递了(利用了事件的回调函数)
在这里插入图片描述
在父文件中的子标签中定义事件
在这里插入图片描述

在函数中实现该事件
在这里插入图片描述
e:代表了回调函数传递的参数,并将参数赋值给state中的变量childValue
这时父文件中的标签就可以取到子文件中传递过来的数据了
在这里插入图片描述

点击按钮之后的效果图
在这里插入图片描述
未点击时的效果图
在这里插入图片描述

xiangzidz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React父子组件互相传值、传函数
莉兹Liz的博客
08-10 2012
需求：父组件中Table表单中添加一个按钮，点击按钮弹出子组件Table表单，子组件表单中也有功能按钮，实现功能后刷新子组件页面。 /** * 子组件 */ import React from 'react'; import { Table, Modal, Button, message } from 'antd'; import './index.less'; import * as http from './httpServer'; class Son extends React.Componen
React组件传值（父子、兄弟组件相互传值）
SmallishJoker的博客
12-04 827
react 组件传值（方法） 父组件向子组件传值 通过props传参，在子组件的标签中以 attr 属性的方式 父组件 Parent.js import React from 'react'; import Child from './Child'; export default class Parent extends React.Component { constructor(pro...
巧妙运用v-model实现父子组件传值的方法示例
10-17
主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue父子传值 小demo
m0_52469153的博客
11-12 110
子传父 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app">
学习react 笔记三 （父子传值）
^_^
06-06 342
定义组件的两种方式1.函数组件 2.类组件 使用的话直接当成标签来用就好了 注意首字母大写哈 二、父传子 定义形式 类组件接收 通过 this.props.num 接收 函数组件接收 事件参数 第一个参数就是 props对象 父 子 子组件可以直接去使用哈传递方法demo 父 子 三、兄弟传值 兄弟传值 a组件使用父组件的值 b组件通过父组件的传递过来的方法进行修改 没有像vue中的vuex、even......
React中父子传参以及兄弟传参
a_l_f_的博客
07-19 506
React中父子传参以及兄弟传参 由于之前都是使用vue开发，今天遇到了这个react中父子传参的问题，所以就来研究一下。话不多说，直奔主题！ 父传子(通过props属性) 直接上代码！ 父组件 import React from 'react'; import Children from './Children'; class Father extends React.Component{ constructor(){ super(); } render(){
Vue组件通信(父传子、子传父、兄弟通信)
亚洲的博客
01-08 2139
一、父传子 首先在父组件的子组件上定义一个属性，在属性上挂载要传输的变量，然后在子组件中通过prop来接收 1、父组件parent.vue <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </templa
react父子组件传值示例
踏步修行
05-16 372
import React from 'react'; export default class Text extends React.Component{ // 构造函数 constructor(props){ super(props); this.style = {background:'#f00',color:'#fff'}; this.arr = [ ...
react 父子组件之间通讯props
10-18
在React中，组件之间的通信是一个核心概念，特别是父子组件之间的通信。本文将详细介绍React中父子组件之间通过props进行通信的方式，以及如何实现父子组件间双向数据流。 首先，我们需要理解props的概念。在React...
react hooks events组件传值
最新发布
weixin_45567934的博客
07-17 141
一般在Vue中 组件通讯不是父子哈，我们可以通过Vue的实例，快速实现一个事件总线（EventBus）来完成操作；在React中可以依赖一个使用较多的库 events 来完成对应的操作；写一个小demo添加events库封装成一个Event工具类值得注意的是，封装起来就是要让，整个项目统一使用一个总事件对象//EventBus.js 文件抛出事件的组件//事件名 和 参数render(){return (
react安裝使用，父子兄弟传值，三种路由传参详解,组件的生命周期
weixin_52005030的博客
09-16 304
一:使用安装 二:父子间传值:
React中组件之间通信（父子组件、跨级组件、无关组件）
Celester_best的博客
08-07 1610
React中组件之间通信，包括父子组件、跨级组件、非父子非跨级的无关组件。 通信方式有props、context、EventEmitter
【vue2】组件基础与组件传值(父子组件传值)
嗨，朋友你好！我是前端领域的工作者
01-15 4118
组件基础概念与全局|局部组件的写法、组件之间传值（父传子、子传父的使用方法与注意事项）
Vue2组件通信
m0_52043522的博客
03-31 950
前言 最近复习了vue相关知识点，今天分享下父子组件通信。 一、组件通信是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、父组件与子组件的通信 1.父传子 子组件设置props属性，接收从父组件传递过来的参数。 在父组件中使用子组件时，一定要动态绑定子组件里面的参数，这样父组件的内容才会传递给子组件。 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as
vue--子传父、父传子
weixin_66375317的博客
05-08 4504
vue --子传父 、父传子
Vue子组件向父组件数据传递，非父子组件数据传递，单向数据流&组件双向数据共享
m0_62168050的博客
09-19 1189
Vue子组件向父组件数据传递，非父子组件数据传递，单向数据流&组件双向数据共享
Vue 组件之间传值(传递数据)的5种方法 (七)
weixin_46022934的博客
12-10 6333
1.父传子:通过自定义属性来进行传值 2.在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3.在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4.在子组件中使用的时候与data数据一样
vue组件之间互相传值：父传子，子传父
热门推荐
pullgo的博客
03-10 1万+
今看到一篇很不错的vue组件传值文章，便于理解，遂做笔记～一般页面的视图App.vue应为这样一.父组件向子组件传值1.创建子组件，在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props，然后创建一个名为message的属性3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值4.保...
react组件通信
xy_is_fhh的博客
06-30 356
组件通信的意义；父传子实现；props说明；子传父实现；兄弟组件通信；跨组件通信Context
react hooks 父子组件传值
04-01
React Hooks中可以使用一些钩子函数来实现父子组件之间的传值。 1. 使用useState钩子函数 通过useState钩子函数可以在父组件中定义一个状态，并将该状态作为props传递给子组件。在子组件中可以通过props获取父组件传递的状态值，并通过回调函数将子组件的值传递给父组件。 父组件： ``` import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [count, setCount] = useState(0); const handleCallback = (childData) => { console.log(childData); }; return ( <div> <ChildComponent count={count} callback={handleCallback} /> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default ParentComponent; ``` 子组件： ``` import React from 'react'; function ChildComponent(props) { const handleClick = () => { props.callback('Hello from child component'); }; return ( <div> <p>Count: {props.count}</p> <button onClick={handleClick}>Send Data to Parent</button> </div> ); } export default ChildComponent; ``` 2. 使用useContext钩子函数 通过useContext钩子函数可以在父组件中创建一个context对象，并将该对象作为props传递给子组件。在子组件中可以通过useContext获取父组件传递的context对象，并在需要的地方使用该对象的值。 父组件： ``` import React, { createContext, useState } from 'react'; import ChildComponent from './ChildComponent'; export const CountContext = createContext(); function ParentComponent() { const [count, setCount] = useState(0); return ( <CountContext.Provider value={count}> <ChildComponent /> <button onClick={() => setCount(count + 1)}>Increment</button> </CountContext.Provider> ); } export default ParentComponent; ``` 子组件： ``` import React, { useContext } from 'react'; import { CountContext } from './ParentComponent'; function ChildComponent() { const count = useContext(CountContext); return ( <div> <p>Count: {count}</p> </div> ); } export default ChildComponent; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzidz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值