react组件的数据传递

在react中，为了解决html标签构建应用的不足，将公共的功能单独抽离成一个文件作为一个组件，在使用的地方按需引入，既然是组件彼此调用，就会涉及到父子组件的通信，下面主要来总结简单的组件通信。

1，项目准备

在开始组件通信前，先在components中新建两个文件，News.js和Header.js，并在News.js中引用Header.js，然后在App.js中引入News.js。

App.js

react组件的数据传递

Header.js

react组件的数据传递

News.js

react组件的数据传递

2，父组件给子组件传值

要在子组件中获取父组件传递的值，只需要两步就可以了：

在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
子组件里面 this.props.msg

根据这两步，我们分别修改Header.js和News.js

Header.js

react组件的数据传递

News.js

react组件的数据传递

3，在子组件中调用父组件的方法

在子组件中使用父组件的方法，需要分成3步：

在父组件中定义方法；
在调用子组件的时候绑定该方法
在子组件中使用该方法。

我们将上面的代码稍作调整，在父组件Header.js中定义一个执行打印语句的方法

react组件的数据传递

然后在调用子组件的时候，绑定这个方法

react组件的数据传递

最后，在子组件News.js中的一个按钮上添加点击事件，通过点击事件调用该方法。

react组件的数据传递

4，在父组件中获取子组件的数据和方法

想要在父组件中获取子组件的数据和方法，可以先在父组件中获取整个子组件实例，继而再获取实例和方法就可以了。

首先，在子组件Header.js中定义相关的方法和数据：

react组件的数据传递

然后在父组件中调用子组件的时候指定ref的值 <Header ref='header'></Header>，并通过this.refs.header 获取整个子组件实例

react组件的数据传递

当我们执行父组件的点击事件时，就可以使用子组件的方法和数据了。

react组件的数据传递

完整的父子组件代码如下：

Header.js

import React,{Component} from 'react'
class Header extends Component{
    constructor(props){
        super(props);
        this.state={
            title:"我是子组件的数据"
        }
    }
    childFun=()=>{
        console.log("我是子组件的方法");
        console.log(this.state.title)
    }
    render(){
        return(
            <div>
               <h3>我是子组件</h3>
            </div>
        )
    }

}
export default Header;

News.js

import React,{Component} from 'react'
import Header from './Header'
class News extends Component{
    constructor(props){
        super(props);
        this.state={
            title:'我是父组件'
        }
    }
    run=()=>{
        console.log('我是父组件方法')
    }
    getHeader=()=>{
        this.refs.header.childFun();
        this.setState({
            title:this.refs.header.state.title
        })
    }
    render(){
        return(
            <div>
                <h2>我是News.js，是一个父组件</h2>
                <Header ref='header'/>
                <div>{this.state.title}</div>
                <button onClick={this.getHeader}>执行子组件的方法</button>
            </div>
        )
    }

}
export default News;