在React中同级组件本身是没有任何关联的，要想有联系只能通过共同的父组件传值，一个子组件将数据传递到父组件中，父组件接收值再传入另一个子组件中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
//子组件向父组件传值，父组件接收再传递给另一个子组件
class Childone extends React.Component{
constructor(props){
super(props);
this.state={color:"lightblue"}
}
handlecolor(){
this.props.fn("red");             
//在触发方法中通过props添加一个新的fn方法，并且将颜色参数red传入父组件
this.setState({color:"red"});
}
render(){
return(
<div>
<h4 style={{color:this.state.color}}>我是第一个子组件</h4>
<button onClick={this.handlecolor.bind(this)}>改变第二个子组件颜色</button>       
//给第一个子组件绑定一个方法，点击就触发，注意要绑定this
</div>
)
}
}
class Childtwo extends React.Component{
constructor(props){
super(props);
}
render(props){
return(
<h4 style={{color:this.props.co}}>我是第二个子组件</h4>               
//利用prop属性从外界即父组件获取参数，不能用state，state是内部使用的
)
}
}
class Parents extends React.Component{
constructor(props){
super(props);
this.state={childtwocolor:"lightblue"};
}
change(color) {
this.setState({childtwocolor: color});
}
render(props) {
return (
<div>
<Childone fn={(color)=>{this.change(color)}}></Childone>         
//第一个子组件的方法fn，将参数red传入函数change中，更新父组件本身的颜色childtwocolor
<Childtwo co={this.state.childtwocolor}></Childtwo>                   
//第二个子组件获取父组件本身的颜色，当父组件颜色更新时，它也会随之更新
</div>
)
}
}
ReactDOM.render(
<Parents />,
document.getElementById('box')
);
</script>
</body>
</html>

React同级组件传值的更多相关文章

  1. 【React入门】React父子组件传值demo

    公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...

  2. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  3. react 兄弟组件传值（发布订阅，使用于任何组件传值，包括vue）

    react中兄弟组件传值常规操作一般是,A组件传给父组件,父组件再传给B组件 非常规操作 利用  pubsub-js 在Home组件内调用 PubSub.publish("第一个参数是事件名 ...

  4. react 03 组件传值

    一 基础 props: 父传子  单向 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css ...

  5. React 多组件传值props和this

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

  6. react 父子组件传值

    父组件向子组件传递信息 父组件片段 constructor(props){ super(props) this.state={ message:"我是父组件传来的" } } ren ...

  7. vue 父子组件、兄弟组件传值

    参考文章:Vue2.0子同级组件之间数据交互 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. (一)父组件给子组件传值,关键字:props ...

  8. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

  9. React学习笔记(三) 组件传值

    组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...

  10. 使用React.cloneElement()给子组件传值

    React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...

随机推荐

  1. 根目录被赋予777 -R权限后的处理过程

    解决某研发手残导致的系统宕机问题的处理过程 背景 2022.8.8 公司一台服务器出现了宕机的现象: 所有的人都无法远程, 都提示密码错误. 但是网络还是通的. 2022.8.12 出差前一天去了一趟 ...

  2. 超级好用的elementui动态循环菜单

    <template> <div> <el-menu @select="selectMenu" :default-active="curren ...

  3. 3D圆饼图，可修改颜色，图片等，具体见代码：

    组件代码: <template> <!-- 饼图 --> <div :id="histogramId" v-bind:style="{hei ...

  4. 强化学习从基础到进阶-常见问题和面试必知必答[4]：：深度Q网络-DQN、double DQN、经验回放、rainbow、分布式DQN

    强化学习从基础到进阶-常见问题和面试必知必答[4]::深度Q网络-DQN.double DQN.经验回放.rainbow.分布式DQN 1.核心词汇 深度Q网络(deep Q-network,DQN) ...

  5. 6.1 Windows驱动开发：内核枚举SSDT表基址

    SSDT表(System Service Descriptor Table)是Windows操作系统内核中的关键组成部分,负责存储系统服务调用的相关信息.具体而言,SSDT表包含了系统调用的函数地址以 ...

  6. 4.5 Windows驱动开发：内核中实现进程数据转储

    多数ARK反内核工具中都存在驱动级别的内存转存功能,该功能可以将应用层中运行进程的内存镜像转存到特定目录下,内存转存功能在应对加壳程序的分析尤为重要,当进程在内存中解码后,我们可以很容易的将内存镜像导 ...

  7. 8.5 C++ 继承与多态

    C/C++语言是一种通用的编程语言,具有高效.灵活和可移植等特点.C语言主要用于系统编程,如操作系统.编译器.数据库等:C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统.图形用户界面 ...

  8. Python 字符串与字节数组转换

    整数之间的进制转换: 10进制转16进制: hex(16) ==> 0x10 16进制转10进制: int('0x10', 16) ==> 16 类似的还有oct(), bin() 字符串 ...

  9. C++ Boost库 实现命令行解析

    Boost库中默认自带了一个功能强大的命令行参数解析器,以往我都是自己实现参数解析的,今天偶尔发现这个好东西,就来总结一下参数解析的基本用法,该库需要引入program_options.hpp头文件, ...

  10. 【动态内存】C语言动态内存使用常见错误及其避免方法（初学者避雷）

    C语言动态内存使用常见错误及其避免方法(初学者动态内存避雷手册) 求个赞求个赞求个赞求个赞 谢谢 先赞后看好习惯 打字不容易,这都是很用心做的,希望得到支持你 大家的点赞和支持对于我来说是一种非常重要 ...