兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值

来看代码:

父组件代码

 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中兄弟组件传值的更多相关文章

  1. React中父子组件传值

    一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...

  2. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  3. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  4. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  5. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  6. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  7. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  8. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  9. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

随机推荐

  1. 记一次线上问题排查:C#可选参数的坑

    线上报了大量异常,错误信息为:找不到XX方法实现 代码调用关系是: 查看代码历史记录,发现最近上线前对 GetUserDottedLineSuperiors 方法做过修改,增加了一个可选参数. 跟相关 ...

  2. Java自学-控制流程 break

    Java的break语句 结束循环 示例 1 : break; 直接结束当前for循环 public class HelloWorld { public static void main(String ...

  3. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  4. JAVA基础之HttpServletResponse响应

    用户在客户端输入网址(虚拟路径)时,开始发送一个HTTP请求(请求行.请求头.请求体)至服务器.服务器内的Tomcat引擎会解析请求的地址,去找XML文件,然后根据虚拟路径找Servlet的真实路径, ...

  5. 纯css实现省略号,兼容火狐,IE9,chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Mysql中类似于oracle中nvl()函数的ifnull()函数

    IFNULL(expr1,expr2)  如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境.  my ...

  7. Android Studio 打包生成apk

    打开AndroidStudio,并且打开想要生成apk文件的项目  点击工具栏上面的“Builder”  点击“Builder”之后在下拉菜单里面可以看到“Genarate Singed APK”,点 ...

  8. 安装仪表盘控件Iocomp会遇到的几个常见问题

    相信从事HMI和自动化开发专业的小伙伴在使用工业仪表盘和图表控件时,都很熟悉怎么安装和操作Iocomp产品(毕竟它功能太强大了,基本人手一份的节奏),但是小编想肯定还是有很多和小编一样的入门的伙伴在安 ...

  9. js 高阶函数之柯里化

    博客地址:https://ainyi.com/74 定义 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且 ...

  10. 【OGG】OGG的下载和安装篇

    [OGG]OGG的下载和安装篇 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O(∩_∩ ...