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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 关于Nginx理解
由于微信小程序要使用Https,但是又不能修改已有线上的配置.所以最简单的方法就是使用nginx转发,在nginx上使用https,然后再转发到内部服务器.Nginx由于其优良的性能.一台4核16GB ...
- LNMP安装201812012237
发表这篇文章最初的意愿是想做个最新版的zabbix使用,后来看了下好多“软件”都升级了(如nginx.mysql等),就想干脆做个最新版本的LNMP环境得了,再单独做zabbix的最新版本省得以后升级 ...
- 使用Android SDK Manager下载sdk时总是出现中断异常的解决办法。
1.搜到到你本机的hosts文件. 2.打开该文件. 3.在该文件最后一行添加:74.125.31.136 dl-ssl.google.com 4.重新下载问题解决. 参考链接:http://bbs. ...
- Ionic下的JPush缺少统计代码问题解决方法
用Ionic打包apk后安装到手机,收到缺少统计代码的提示,解决方法如下: 1. 找到了 platforms/android/src/com/ionichina/ioniclub/MainActiov ...
- kafka学习1：kafka安装
一.环境准备 1.jdk 如果不会安装linux下的jdk,参考这篇文章:http://www.cnblogs.com/gudi/p/7812033.html 2.kafka wget –c ht ...
- HNOI2019 JOJO
HNOI2019 JOJO jojo这个坑填上了,然鹅还有序列这个题啊啊啊啊啊啊 膜 可持久化这个东西没有强制在线就是假的,直接建树dfs就行了 这题是kmp的加强版,每次会加一堆相同的数进来 先想一 ...
- layer.conifrm 非阻塞执行 ztree删除节点 问题
layer.confirm无法阻塞js执行,导致ztree插件的beforeRemove回调函数未等待用户确定删除便已经移除界面中的节点, 因此可能会出现前后台数据不一致情况,正常逻辑理应删除后台数据 ...
- MySQL主主同步配置
1. MySQL主主配置过程 在上一篇实现了主从同步的基础上,进行主主同步的配置. 这里用node19(主),node20(从)做修改,使得node19和node20变为主主同步配置模式 修改配置文件 ...
- Authorize的Forms认证
页面请求步骤: 1.登录地址: http://localhost:4441/SysLogin/AdminLogin 2.登陆成功地址:http://localhost:4441/Frame/MainF ...
- Redis未授权访问漏洞的利用及防护
Redis未授权访问漏洞的利用及防护 什么是Redis未授权访问漏洞? Redis在默认情况下,会绑定在0.0.0.0:6379.如果没有采取相关的安全策略,比如添加防火墙规则.避免其他非信任来源IP ...