react 父子传值_React之父子组件传值

1.Header.js

import React, { Component } from 'react';

class Header extends Component{

constructor(props){

super(props);//国定写法

this.state={

msg:'这是一个头部组件'}

}

getNews=()=>{//alert(this.props.news.state.msg);

this.props.news.getData();

}

render(){return(

{this.props.title}

调用news父组件的run方法

获取news组件的getData方法

获取整个news组件实例

子组件给父组件传值

)

}

}

exportdefault Header;

2.Footer.js

import React, { Component } from 'react';

class Footer extends Component{

constructor(props){

super(props); //国定写法

this.state={

msg:'我是一个底部组件'

}

}

run=()=>{

alert('我是底部组件的run方法')

}

render(){

return(

我是一个底部组件

)

}

}

export default Footer;

3.Home.js

import React, { Component } from 'react';

/*

React中的组件: 解决html 标签构建应用的不足。

使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。

父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

父子组件传值(react 父子组件通信)：

父组件给子组件传值

1.在调用子组件的时候定义一个属性

2.子组件里面 this.props.msg

说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。

父组件主动获取子组件的数据

1、调用子组件的时候指定ref的值

2、通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )

*/

import Header from './Header';

class Home extends Component {

constructor(props){

super(props);

this.state={

msg:'我是一个首页组件',

title:'首页组件'

}

}

render() {

return (

---

这是首页组件的内容

);

}

}

export default Home;

4.New.js

/*

React中的组件: 解决html 标签构建应用的不足。

使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。

父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

父子组件传值(react 父子组件通信)：

父组件给子组件传值

1.在调用子组件的时候定义一个属性

2.子组件里面 this.props.msg

说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。

父组件主动获取子组件的数据

1、父组件调用子组件的时候指定ref的值

2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )

*/

import React, { Component } from 'react';

import Header from './Header';

import Footer from './Footer';

class News extends Component {

constructor(props){

super(props);

this.state={

title:'新闻组件',

msg:'我是新闻组件的msg'

}

}

run=()=>{

alert('我是父组件的run方法')

}

//获取子组件里面穿过来的数据

getChildData=(result)=>{

alert(result);

this.setState({

msg:result

})

}

getData=()=>{

alert(this.state.title+'getData');

}

//父组件主动调用子组件的数据和方法

getFooter=()=>{

/*

父组件主动获取子组件的数据

1、调用子组件的时候指定ref的值

2、通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )

*/

//alert(this.refs.footer.state.msg); //获取子组件的数据

this.refs.footer.run();

}

render() {

return (

---

这是新闻组件的内容---{this.state.msg}

获取整个底部组件

---

);

}

}

export default News;