React子组件和父组件通信

React子组件和父组件通信包括以下几个方面：
1、子组件获取父组件属性：props或者state

2、子组件调用父组件的方法

3、父组件获取子组件的属性：props或者state

4、父组件调用子组件的方法

我们从下面这个例子来详细了解：
父组件：
 1 var Father=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"父组件"
 5         }
 6     },
 7     MakeMoney:function(){ // 挣钱，供子组件调用
 8         alert("我在挣钱!");
 9     },
10     CheckStudy:function(){ // 学习，调用子组件方法
11         this.refs["child"].Study();
12     },
13     getChildName:function(){ // 调用子组件方法获取孩子名字
14         alert(this.refs["child"].getName());
15     },
16     render:function(){
17         
18         return <div>
19                     <button onClick={this.CheckStudy}>监控孩子学习</button>
20                     <button onClick={this.getChildName}>获取孩子名字</button>
21                     <br/>
22                     子组件
23                     <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
24                 </div>;
25     }
26 });

子组件：
 1 var Child=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"子组件"
 5         }
 6     },
 7     StudyMakeMoney:function(){ // 学习挣钱，调用父组件方法
 8         this.props.MakeMoney();
 9     },
10     Study:function(){ // 学习，调用子组件方法
11         alert("我在学习！");
12     },
13     getName:function(){// 供父组件调用，返回名字
14         return this.props.name;
15     },
16     render:function(){
17         
18         return <div>父组件名字：{this.props.fatherName}<button onClick={this.StudyMakeMoney}>孩子学习挣钱</button></div>;
19     }
20 });

对应的
1、子组件Child通过父组件传入的name，获取父组件的props

2、子组件Child通过父组件传入的MakeMoney方法调用父组件方法

3、父组件Father，通过ref调用子组件的getName方法，获取props

4、父组件Father,通过ref调用子组件的Study方法

本文介绍了React 子组件向父组件传值的方法，分享给大家
子组件需要控制自己的 state， 然后告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。
/***实现在输入框输入邮箱时，在div中即时显示输入内容***/
//子组件
var Child = React.createClass({
render: function(){
return (
邮箱：
)
}
});
//父组件
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(event){
this.setState({email: event.target.value});
},
render: function(){
return (
邮箱：{this.state.email}
)
}
});
React.render(
,
document.getElementById('test')
);
原理：
依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式。
分析：
React中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

react 子组件向父组件传值
react的传值与vue的方式一样。

父组件向子组件传值，通过属性传递，子组件直接通过props接收。
子组件向父组件传值：子组件调用父组件传递过来方法。方法在父组件中创建，子组件调用。
父组件：父组件向子组件传递handleDelete方法，此方法的操作也在父组件。


子组件：子组件调用父组件传递过来的handleDelete方法，子组件中再定义此方法，在方法中定义要传给父组件的数据。


总结：不管是子传父，还是父传子都是通过props属性来传递。

在使用模块化开发，经常会遇到组件之间的传值问题，这篇说一下react子组件如何向父组件传值，父组件如何获取子组件的数据和方法
父组件：
import React, { Component } from 'react';
import Header from './Header.js'		//引入子组件

class Home extends Component{
	constructor(props){
		super(props)
		this.state={
			title:'首页'
		}
	}
	getChildData=(res)=>{
		alert(res)
		this.setState({
				msg:res
		})
	}
	render(){
		return(
			<div>
				<Header  news={this}/>		//这里给子组件定义一个news属性为this
			</div>
		) 
	}
}
export default Home

子组件添加一个按钮定义一个onClick事件this.props.news.getChildData就可以调用父组件的方法并使用bind绑定this和传递参数
<button onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')}>子组件给父组件传值</button>

这里父组件中的getChildData方法就可以通过形参接收参数。
父组件主动获取子组件的数据及方法

1.调用子组件的时候指定一个ref值

2.通过this.refs.header 获取整个子组件实例  （注意要在dom加载完成之后获取）
ref的使用我这篇文章中有写，这里不再说明，传送门！