React中兄弟组件传值
兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值
来看代码:
父组件代码
import React from 'react';
import Son1 from './Son1';
import Son2 from './Son2'
class Father extends React.Component{
constructor(){
super();
// 先给message一个空值
this.state={
message:''
}
}
// 声明一个方法用来接收Son1传来的值
message(msg){
this.setState({
message:msg //把Son1传来的值给message
})
}
render(){
return(
<React.Fragment>
{/* 我们在这里引入子组件 拿到上边声明的方法 */}
<Son1 msg={this.message.bind(this)}></Son1>
{/* 这里引入第二个子组件 并声明一个属性str 把Son1传来的值传过去 */}
<Son2 str={this.state.message}></Son2>
</React.Fragment>
)
}
}
export default Father;
第一个子组件
import React from 'react';
class Son1 extends React.Component{
constructor(){
super()
}
btn(msg){
// 在这传给父组件一个值
this.props.msg('这是Son1传过来的')
}
render(){
return(
<React.Fragment>
{/* 写一个点击按钮 来调用上边的值*/}
<button onClick={this.btn.bind(this)}>Son1中的按钮</button>
</React.Fragment>
)
}
}
export default Son1;
第二个子组件
import React from 'react';
class Son2 extends React.Component{
constructor(){
super()
}
render(){
return(
<React.Fragment>
{/* 第二个子组件通过props 这个属性来接受父组件传过来的str */}
<div>接收Son1的值:{this.props.str}</div>
</React.Fragment>
)
}
} export default Son2;
这样就实现了简单的兄弟组件传值
React中兄弟组件传值的更多相关文章
- React中父子组件传值
一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- vue 父子组件传值,兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
随机推荐
- 记一次线上问题排查:C#可选参数的坑
线上报了大量异常,错误信息为:找不到XX方法实现 代码调用关系是: 查看代码历史记录,发现最近上线前对 GetUserDottedLineSuperiors 方法做过修改,增加了一个可选参数. 跟相关 ...
- Java自学-控制流程 break
Java的break语句 结束循环 示例 1 : break; 直接结束当前for循环 public class HelloWorld { public static void main(String ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- JAVA基础之HttpServletResponse响应
用户在客户端输入网址(虚拟路径)时,开始发送一个HTTP请求(请求行.请求头.请求体)至服务器.服务器内的Tomcat引擎会解析请求的地址,去找XML文件,然后根据虚拟路径找Servlet的真实路径, ...
- 纯css实现省略号,兼容火狐,IE9,chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Mysql中类似于oracle中nvl()函数的ifnull()函数
IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境. my ...
- Android Studio 打包生成apk
打开AndroidStudio,并且打开想要生成apk文件的项目 点击工具栏上面的“Builder” 点击“Builder”之后在下拉菜单里面可以看到“Genarate Singed APK”,点 ...
- 安装仪表盘控件Iocomp会遇到的几个常见问题
相信从事HMI和自动化开发专业的小伙伴在使用工业仪表盘和图表控件时,都很熟悉怎么安装和操作Iocomp产品(毕竟它功能太强大了,基本人手一份的节奏),但是小编想肯定还是有很多和小编一样的入门的伙伴在安 ...
- js 高阶函数之柯里化
博客地址:https://ainyi.com/74 定义 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且 ...
- 【OGG】OGG的下载和安装篇
[OGG]OGG的下载和安装篇 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O(∩_∩ ...