React的组件间通信
一、React的单向数据流
React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。
二、React的组件间通信
1）父级-》子级
比较简单，直接调用时设置props值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "菜鸟教程",
site: "http://www.runoob.com"
};
}, render: function() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}); var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
}); var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}); ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
2）子级-》父级
用回调函数，传参
class Father extends React.Component{
constructor(props){
super(props);
this.state={
inputValue:""
}
}
//在回调函数里处理子级的输入
handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}
render(){
return (
<div>
<span>输入为{this.state.inputValue}</span>
<Child onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
//通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数
class Child extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Father />,
document.getElementById('root')
);
3）兄弟《-》兄弟：
按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。
class Form1 extends React.Component{
constructor(props){
super(props);
this.state={
input1Value:"",
input2Value:""
}
}
handleInput1Change(e){
const input1=e.target.value;
let input2=input1-;
this.setState({
input1Value:input1,
input2Value:input2
});
}
handleInput2Change(e){
const input2=e.target.value;
let input1=input2- + ;
this.setState({
input1Value:input1,
input2Value:input2
});
}
render(){
return (
<div>
输入框1：
<Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} />
输入框2：
<Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
class Input1 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
class Input2 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Form1 />,
document.getElementById('root')
);
React的组件间通信的更多相关文章
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- react系列（三）组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 理解 boxsizing
理解boxsizing 什么是css盒模型?css盒模型包括如下属性:内容(content),填充(padding),边框(border),边界(margin). 这些东西我们可以拿日常生活中的列子来 ...
- ES5与ES6对比
ES5与ES6对比 1. 模块引用 1.在ES5里,引入React包基本通过require进行,代码类似这样: // ES5 var React = require('react'); var { C ...
- Percona XtraDB Cluster集群
官网参考地址: https://www.percona.com/doc/percona-xtradb-cluster/LATEST/configure.html 前期准备: 都用的root权限或使用s ...
- Android在代码中设置控件的drawableLeft，drawableRight，drawableTop，drawableBottom。
根据业务的需要,要在代码中设置控件的drawableLeft,drawableRight,drawableTop,drawableBottom属性. 我们知道在xml中设置的方法为:android:d ...
- C# yield关键词使用
C#有一个关键词yield,简化遍历操作实现的语法糖. 下面Insus.NET使用例子来说明,就拿昨晚的一篇<从字符串数组中把数字的元素找出来> http://www.cnblogs.co ...
- 将WinForm程序（含多个非托管Dll）合并成一个exe的方法
原文:将WinForm程序(含多个非托管Dll)合并成一个exe的方法 开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. ILMerge能把托管dl ...
- 如何打造网站克隆、仿站工具（C#版）
前两天朋友叫我模仿一个网站,刚刚开始,我一个页面一个页面查看源码并复制和保存,花了我很多时间,一个字“累”,为了减轻工作量,我写了个网站“克隆工具”,一键克隆,比起人工操作, 效率提高了200%以上, ...
- 深入理解USB流量数据包的抓取与分析
0x01 问题提出 在一次演练中,我们通过wireshark抓取了一个如下的数据包,我们如何对其进行分析? 0x02 问题分析 流量包是如何捕获的? 首先我们从上面的数据包分析可以知道,这是个USB的 ...
- zabbix监控-基本原理介绍
一.Linux下开源监控系统简单介绍1)cacti:存储数据能力强,报警性能差2)nagios:报警性能差,存储数据仅有简单的一段可以判断是否在合理范围内的数据长度,储存在内存中.比如,连续采样数据存 ...
- 最小生成树模板题POJ - 1287-prim+kruskal
POJ - 1287超级模板题 大概意思就是点的编号从1到N,会给你m条边,可能两个点之间有多条边这种情况,求最小生成树总长度? 这题就不解释了,总结就算,prim是类似dijkstra,从第一个点出 ...