正文
React之父子组件之间传值
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、新增知识点
/**
React中的组件: 解决html 标签构建应用的不足。
使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。
父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
父子组件传值（react 父子组件通信）
父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。 父组件主动获取子组件的数据
1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>
2、父组件通过this.refs.header 获取整个子组件实例 (dom（组件）加载完成以后获取 ) defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值
//当获取不到父组件的传值，选择默认值
Header1.defaultProps={
msg:"默认标题"
}
propTypes:验证父组件传值的类型
//检查父组件传过来的数据类型
Header1.propTypes={
num:PropTypes.number
}
都是定义在子组件中
*/
2、代码实例实现之子组件Header.js
import React from 'react'; /**
* 父子组件传值
*/
class Header extends React.Component{
constructor(props){
super(props);
this.state={
msg:"header 内容"
}
}
getMsg=()=>{
//this.props.news.getData();
// alert(this.props.news.state.msg) //执行父组件数据
this.props.news.getData(); //执行父组件方法并获取数据
}
headerRun=()=>{
alert("这是Header组件run方法")
}
render() {
return(
<div>
<h2>{this.props.title}</h2>
<br/>
{this.state.msg}
<br/>
<button onClick={this.props.run}>点击调用父组件的run方法</button>
<br/>
<button onClick={this.props.news.getData}>获取整个父组件方法</button> <br/>
<button onClick={this.getMsg}>获取整个父组件定义数据</button>
<br/>
<button onClick={this.props.news.getChildData.bind(this,"我是子组件数据")}>子组件传值给父组件</button> </div>
)
}
} export default Header;
3、代码实例实现之父组件Home10.js
import React from 'react';
import Header from './Header';
/**
React中的组件: 解决html 标签构建应用的不足。
使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。
父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
父子组件传值（react 父子组件通信）
父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。 父组件主动获取子组件的数据
1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>
2、父组件通过this.refs.header 获取整个子组件实例 (dom（组件）加载完成以后获取 )
*/
class Home10 extends React.Component{
constructor(props){
super(props);
this.state={
msg:"我是一个首页组件内容",
title:"首页"
}
} run=()=>{
alert("这是Home10组件的run方法")
}
//获取子组件传过来的数据
getChildData=(result)=>{
alert(result);
} getData=()=>{
alert("获取数据")
}
//父组件主动调用子组件数据和方法
getHeaderMethod=()=>{
alert(this.refs.header.state.msg);
this.refs.header.headerRun();
}
render() {
return(
<div>
<br/>
<Header title={this.state.title} run={this.run} news={this} ref="header"/>
<hr/><br/>
{this.state.msg}
<br/>
<hr/>
<button onClick={this.getHeaderMethod}>获取子组件的数据</button> </div>
)
}
}
export default Home10;
