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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- Mac中安装JDK1.8和JDK11双版本并任意切换
首先区官网下载JDK8和JDK11安装包,安装后打开bash $ cd /Library/Java/JavaVirtualMachines $ ls -al 可以看到两个版本安装成功 然后编辑环境变量 ...
- Linux x64 -- 内核程序（驱动程序）读取任意进程数据实现
四级页表结构 现在的64位Linux系统中,并没有使用全部的64位地址空间,而是使用其低48位,高16位并没有使用. 其中 39至47这9位用于索引PGD(page global directory) ...
- PAT A1021 Deepest Root （25 分）——图的BFS,DFS
A graph which is connected and acyclic can be considered a tree. The hight of the tree depends on th ...
- POJ1251（Kruskal水题）
https://vjudge.net/problem/POJ-1251 The Head Elder of the tropical island of Lagrishan has a problem ...
- Objective-C autoreleasepool深入理解
Objective-C autorelease // main.m int main(int argc, char * argv[]) { @autoreleasepool { } } clang - ...
- Android FragmentPagerAdapter翻译
public abstract class FragmentPagerAdapter extends PagerAdapter java.lang.Object ↳ android.suppor ...
- [01] Why Spring
1.何为框架 简单来说,框架就是制定了一套规范或者规则(思想),让程序员在该规范或规则下进行工作.如上图修楼房,在有框架的情况下,修建工作才高效且有条不紊.楼层钢架规定了大楼的结构,工人按架构添砖放瓦 ...
- PHP实现栈数据结构
利用php面向对象思想,栈的属性有top.最大存储数.和存储容器(这里利用了php数组). 代码如下:实现了入栈.出栈.遍历栈的几个方法: <?php class Stack{ const MA ...
- 如何实现.net程序的进程注入
原文:如何实现.net程序的进程注入 如何实现.net程序的进程注入 周银辉 进程注入比较常见,比如用IDE调试程序以及一些Sp ...
- 从github checkout子文件夹
1.将远程项目加载到指定目录:$git init; $git remote add -f origin url2.使用SparseCheckout模式:$git config core.sparsec ...